关注前端开发
关注用户体验

javascript实现当前页导航激活

之前写过一篇导航效果,效果是有的,但是左辽同学所没有效果,我就再写这篇javascript实现当前页导航激活,希望像左辽同学类似的问题得到解决!

html(引用大前端的导航,不可用#代替链接,测试可以新建几个静态页面)

<ul id=”nav”>
<li><a href=”http://www.daqianduan.com/”>首页</a></li>
<li><a href=”http://www.daqianduan.com/category/html-css/”>HTML/CSS</a></li>
<li><a href=”http://www.daqianduan.com/category/javascript/”>JavaScript</a></li>
<li><a href=”http://www.daqianduan.com/category/seo/”>SEO</a></li>
<li><a href=”http://www.daqianduan.com/category/front-end/”>前端新闻</a></li>
</ul>

javascript(给当前页面指定导航加了.on的class)

$(function() {
var a1 = document.URL;
var a2 = $(“#nav a”);
for (var i = 0; i < a2.length; i++) {
if (a1.indexOf($(a2[i]).attr(“href”)) != -1) {
$(a2[i]).parent().addClass(“on”);
return;
}
}
$(a2[0]).parent().addClass(“on”);
})

css(根据自己的需求做相关调整)

#nav li{display:inline-block;float:left;text-align:center;height:36px;padding-left:4px;line-height:36px;background:url(http://img.daqianduan.com/ui/nav.gif) no-repeat right bottom;}
#nav li a{display:block;color:#777;padding:0 15px 0 10px;}
#nav li.on{font-weight:bold;background:url(http://img.daqianduan.com/ui/nav.gif) no-repeat 0 0;margin-left:-3px;}
#nav li.on a{background:url(http://img.daqianduan.com/ui/nav.gif) no-repeat right 0;}

未经允许不得转载:大前端 » javascript实现当前页导航激活
分享到:更多 ()

评论 19

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #16

    electronic cigarette flavors javascript实现当前页导航激活_大前端

    this article3年前 (2014-05-06)回复
  2. #15

    Hello.This article was really fascinating, especially because I was searching for thoughts on this subject last Friday.

    Lora Creenan3年前 (2014-04-28)回复
  3. #14

    首页
    需要改成
    首页

    不然的话就永远是首页tab亮了。
    请求博主在优化一下

    72色5年前 (2012-03-29)回复
  4. #13


    :razz:

    litson5年前 (2012-02-14)回复
  5. #12

    http://code.jquery.com/jquery-1.7.1.min.js

    →牧詳d狼←5年前 (2012-02-08)回复
  6. #11

    上面就是一个demo,之所以没有实现最终的效果是因为没有把jquery类库引用进来,再在页面中引用这句就OK了

    →牧詳d狼←5年前 (2012-02-08)回复
  7. #10

    不可以啊!!!求实例啊!!

    ookmoo5年前 (2012-02-02)回复
  8. #9

    :mrgreen: very good!

    水中月明6年前 (2011-08-15)回复
  9. #8

    同时提供DEMO比较好

    stone6年前 (2011-07-15)回复
  10. #7

    自己操作效果没实现。能不能加个demo页面。 ❓

    淘客吧6年前 (2011-07-13)回复
  11. #6

    背景图片打不开了。

    sexyz6年前 (2011-07-13)回复
  12. #5

    😛 😛 😛 我草,谢谢啦啊,

    sexyz6年前 (2011-07-13)回复
  13. #4

    Hello, i think that i saw you visited my blog thus i came to “return the favor”.I am trying to find things to enhance my web site!I suppose its ok to use a few of your ideas!!

    metal garden furniture6年前 (2011-05-20)回复
  14. #3

    It is truly a great and useful piece of information. I am glad that you simply shared this helpful information with us. Please keep us up to date like this. Thank you for sharing.

    Otha Litscher6年前 (2011-04-11)回复
  15. #2

    强烈建议楼弄个效果页哦,我js基础差css的和hml的都能明白 就中间那段js看的不明白谢谢博主先 [:11]

    晨洋6年前 (2010-10-22)回复
  16. #1

    很不错··关注

themebetter 国内更好的WordPress主题服务商

立即前往