jquery - jQuery的链接的CSS类的变化

我有以下主菜单：

<div id="smoothmenu" class="ddsmoothmenu">
    <ul id="nav">
        <li><a href="/Home">Home</a></li>
        <li><a href="/About">About</a> </li>
        <li><a href="/Features">Features</a></li>
        <li><a href="/Contact">Contact</a></li>
        <li><a href="/Support">Support</a></li>
    </ul>
 </div>

单击链接后，我想向链接添加一个“选定”的CSS类，并从中的所有其他链接中删除CSS类。这是为了标记用户单击以打开的页面。

也许可以通过以下方式实现：在页面加载时jquery读取当前路径，并将css类添加到相应的菜单链接标记中？

谢谢

最佳答案

CSS-Tricks Snippet

假设您有这样的导航：

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/clients/">Clients</a></li>
        <li><a href="/contact/">Contact Us</a></li>
    </ul>
</nav>

并且您位于URL：

http://yoursite.com/about/team/

并且您希望About链接获得“活动”类，以便您可以直观地表明它是活动导航

$(function() {
  $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

从本质上讲，它将匹配nav的href属性以“ / about”（或任何辅助目录为准）开头的链接。

Further reading...

关于jquery - jQuery的链接的CSS类的变化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19272329/