代码之家 › 专栏 › 技术社区 › toomanyairmiles

使用jquery向导航添加活动的css类

css jquery

toomanyairmiles · 技术社区 · 16 年前

大家好,我正在寻找一种简单而不引人注目的方法,根据它所在的目录向无序列表菜单添加class=“active”。不幸的是,我无法向body标记添加自定义类,因此无法使用纯CSS解决方案。

有人能给我指一个好的教程吗?我已经看过了,但找不到适合我需要的。代码看起来是这样的,我只需要添加基于/directory/或/a 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 回复 | 直到 15 年前

Nick Craver 16 年前

试试这个:

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

dale 16 年前

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

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

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

Mary Daisy Sanchez 15 年前

希望这有助于你的概念将有一个输出在每个特定页面上更改颜色时

var wo=window.location.pathname;

jquery(“ul.nav li a”)。每个(function()。{ var this var=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