Question

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

任何人都可以指点我一个好的教程 - 我看过但找不到符合我需要的教程。代码看起来像这样，我只需要添加基于/ 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>

Answer 1

试试这个：

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

Answer 2

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

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

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

Answer 3

希望这可以帮助你概念产生输出在每个特定页面上改变颜色

var wo = window.location.pathname;

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;

}

} }）;

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

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

3 个答案: