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

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;}

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

评论 20

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

    Great work! That is the kind of info that are meant to be shared around the net. Disgrace on search engines for not positioning this submit higher! Come on over and seek advice from my site . Thanks =)

    Letisha Faggins2周前 (03-11)回复
  2. #16

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

    this article5年前 (2014-05-06)回复
  3. #15

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

    Lora Creenan5年前 (2014-04-28)回复
  4. #14

    首页
    需要改成
    首页

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

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

    :razz:

    litson7年前 (2012-02-14)回复
  6. #12

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

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

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

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

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

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

    :mrgreen: very good!

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

    同时提供DEMO比较好

    stone8年前 (2011-07-15)回复
  11. #7

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

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

    背景图片打不开了。

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

    😛 😛 😛 我草,谢谢啦啊,

    sexyz8年前 (2011-07-13)回复
  14. #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 furniture8年前 (2011-05-20)回复
  15. #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 Litscher8年前 (2011-04-11)回复
  16. #2

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

    晨洋9年前 (2010-10-22)回复
  17. #1

    很不错··关注

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

立即前往