使用jQuery将活动的css类添加到导航中

Hi All I'm looking for a simple unobtrusive way to add a class="active" to an unordered list menu based on the directory it's in. Unfortunately I can't add a custom class to the body tag so I'm unable to use a pure css solution.

大家好我正在寻找一种简单的不引人注目的方式,根据它所在的目录将一个class =“active”添加到无序列表菜单中。不幸的是我无法在body标签中添加自定义类,所以我无法使用纯css解决方案。

Can anyone point me to a good tutorial - I've looked but can't find one that fit's my needs. Code looks like this, I just need to add the class based on /directory/ or / a jquery solution would be ideal as I'm already loading the jQuery library.

任何人都可以指点我一个很好的教程 - 我看过但找不到符合我需求的教程。代码看起来像这样,我只需要添加基于/ directory /或/ jquery解决方案的类是理想的,因为我已经加载了jQuery库。

<ul class="nav">
<li><a href="/index.html">Home</a></li>
<li><a href="/about/about.html">About Us</a></li>
<li><a href="/cv/submit-your-cv.html">Submit CV</a></li>
<li><a href="/vacancies/index.html">Vacancies</a></li>
<li><a href="/news/news.html">Company News</a></li>
<li><a href="/praise/praise.html">Praise</a></li>
<li class="nosep"><a href="/contact/contact.html">Contact Us</a></li>
</ul>

3 个解决方案

#1

Try this:

$(".nav li:has(a[href$='"+window.location.pathname+"'])").addClass("active");

#2

You could look at the window.location variable and set an id to each li-element. Then something like:

您可以查看window.location变量并为每个li元素设置一个id。然后像:

$("...").addClass("myCssClass");

Hope it helps in some way...

希望它在某种程度上有所帮助......

#3

Hope this helps you the concept will have an output on change color on each particular page

希望这可以帮助您概念在每个特定页面上都有变化颜色的输出

var wo = window.location.pathname;

jQuery("ul.nav li a").each(function(){ var thisvar = jQuery(this); var ifid = jQuery(this).attr("href");

jQuery(“ul.nav li a”)。each(function(){var thisvar = jQuery(this); var ifid = jQuery(this).attr(“href”);

if(ifid == wo){

         switch(ifid){
          case "/index.html":
            thisvar.css("color","#000000");
          break;
          case "/about/about.html":
           thisvar.css("color","#EE2E24");
          break;

}

} });

if you like this post you can also visit it on http://linesforme.blogspot.com

如果你喜欢这篇文章,你也可以访问http://linesforme.blogspot.com

#1