jquery - jquery链接css类更改

Question

我有以下主菜单：

<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 类，并从 . 这是为了标记用户点击打开的页面。

也许这可以通过jquery在页面加载时读取当前路径并将css类添加到相应的菜单链接标签的方式来完成？

谢谢

Answer 1

CSS 技巧片段

假设您有这样的导航：

<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>

您在以下网址：

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

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

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

本质上，这将匹配 nav 中的链接，其 href 属性以“/about”开头（或任何二级目录）。

进一步阅读...

Answer 2

派对有点晚了，但试试这个大小......

它将每个锚元素的 href 属性与上面给出的导航结构的当前窗口位置进行比较。

$('.ddsmoothmenu > ul#nav > li').each(function() {
    var $this = $(this),
        $link = $this.children('a'),
        path = $link.attr('href');

    if (path == document.location.pathname) {
        $this.addClass('selected');
    }
});

可以在 JSFiddle 上看到：http: //jsfiddle.net/LdQft/

Answer 3

试试这个

$('div#smoothmenu').on('click', 'a', function(e){
  $(this).addClass('Selected').siblings('a').removeClass('Selected');
});