使用jQuery为导航添加活动CSS类

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>

- toomanyairmiles

Answer 1

试试这个：

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

- Nick Craver

---

嗨，尼克，这很棒，但似乎对于索引页面失败了？有没有想过让它工作？ - toomanyairmiles

问题似乎在于当用户访问 / 而不是 /index.html 时，活动类未出现。此外，如果任何其他页面被称为 index.html，则脚本会复制活动类。 - toomanyairmiles

@toomanyairmiles - 将URL设置为绝对路径是一个选项吗？或者你知道完整路径是什么吗？ - Nick Craver

我可以在某些菜单中放置绝对URL，但有些部分是博客，它们需要从其根目录继承类。 - toomanyairmiles

@toomanyairmiles - 如果您的网站位于根目录，则可以删除 $= 并替换为 =，从而从“以...结尾”更改为普通等于，看看是否符合您的要求...由于不知道您的布局，我无法确定确切情况。 - Nick Craver

Answer 2

您可以查看window.location变量并为每个li元素设置一个id。然后做类似以下的事情：

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

希望它以某种方式有所帮助...

- dale

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上访问它。

- Mary Daisy Sanchez