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

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)

评论 55

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

    I have to thank you for the efforts you have put in writing this blog. I’m hoping to check out the same high-grade content from you later on as well. In truth, your creative writing abilities has motivated me to get my own, personal website now 😉

    DMC57天前回复
  2. #51

    When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several e-mails with the same comment. Is there any way you can remove people from that service? Thanks a lot!

  3. #50

    This page certainly has all of the info I wanted about this subject and didn’t know who to ask.

    DMC51周前 (05-12)回复
  4. #49

    Just right points?I might be aware that as anyone who in point of fact doesn’t write on blogs so much (if truth be told, this can be my first publish), I don’t assume the time period ‘lurker’ could be very turning into to a non-posting reader. It’s no longer your fault in the least , but possibly the blogosphere may just get a hold of a greater, non-creepy name for the ninety folks that revel in studying the content material .

    Nonton Anime2周前 (05-10)回复
  5. #48

    I am really loving the theme/design of your site. Do you ever run into any web browser compatibility problems? A small number of my blog audience have complained about my blog not operating correctly in Explorer but looks great in Firefox. Do you have any solutions to help fix this issue?

    cat2周前 (05-08)回复
  6. #47

    I absolutely agree with everything you have explained. In reality, I browsed throughout your additional content articles and I do think that you’re completely correct. Great job with this website.

    rajapoker3周前 (05-03)回复
  7. #46

    Enjoyed the post.

    Huidverjonging1个月前 (04-21)回复
  8. #45

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    Anti aging1个月前 (04-20)回复
  9. #44

    Keep up the good work! Thanks.

    Huid verbetering1个月前 (04-20)回复
  10. #43

    Enjoyed the post.

    Couperose1个月前 (04-19)回复
  11. #42

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    Huidinstituut1个月前 (04-19)回复
  12. #41

    Thanks for this nice post. …

    Puistjes1个月前 (04-18)回复
  13. #40

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    Ontstekingen1个月前 (04-17)回复
  14. #39

    Looks realy great! Thanks for the post.

    Gevoelige huid1个月前 (04-17)回复
  15. #38

    Thanks for this nice post. …

    floaten1个月前 (04-17)回复
  16. #37

    Keep up the good work! Thanks.

    huidverzorging1个月前 (04-17)回复
  17. #36

    Keep up the good work! Thanks.

    Melasma1个月前 (04-16)回复
  18. #35

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    Jeugdpuistjes1个月前 (04-16)回复
  19. #34

    Nice post! Thank you.

    Huidspecialisaties1个月前 (04-16)回复
  20. #33

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    Huidverbetering1个月前 (04-16)回复
  21. #32

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    huidspecialist1个月前 (04-16)回复
  22. #31

    Enjoyed the post.

    Huidspecialisaties1个月前 (04-16)回复
  23. #30

    Thanks for this nice post. …

    Couperose1个月前 (04-16)回复
  24. #29

    Nice post! Thank you.

    floaten1个月前 (04-16)回复
  25. #28

    Looks realy great! Thanks for the post.

    Puistjes1个月前 (04-16)回复
  26. #27

    Enjoyed the post.

    Melasma1个月前 (04-16)回复
  27. #26

    Nice post! Thank you.

    Pigmentatie1个月前 (04-15)回复
  28. #25

    Looks realy great! Thanks for the post.

    Hyperpigmentatie1个月前 (04-15)回复
  29. #24

    Nice post! Thank you.

    Puistjes1个月前 (04-15)回复
  30. #23

    Enjoyed the post.

    accountant breda1个月前 (04-11)回复
  31. #22

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    boekhouder breda1个月前 (04-11)回复
  32. #21

    Thanks for this nice post. …

  33. #20

    Nice post! Thank you.

    administratie breda1个月前 (04-08)回复
  34. #19

    Thank you for another wonderful post. Where else could anyone get that type of information in such a perfect way of writing? I have a presentation next week, and I’m on the look for such information.

    Anthony Polley1个月前 (04-08)回复
  35. #18

    There are some fascinating closing dates on this article but I don’t know if I see all of them middle to heart. There may be some validity however I will take hold opinion till I look into it further. Good article , thanks and we want extra! Added to FeedBurner as nicely

    my singing monsters2个月前 (03-28)回复
  36. #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)回复
  37. #16

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

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

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

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

    首页
    需要改成
    首页

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

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

    :razz:

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

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

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

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

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

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

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

    :mrgreen: very good!

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

    同时提供DEMO比较好

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

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

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

    背景图片打不开了。

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

    😛 😛 😛 我草,谢谢啦啊,

    sexyz8年前 (2011-07-13)回复
  49. #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)回复
  50. #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)回复
  51. #2

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

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

    很不错··关注

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

立即前往