javascript - 自动选择当前类 - 导航菜单

Question

好的，

所以我想要完成的是使用“选定”类更新导航，表示当前最终用户所在的页面。

我试过很多东西。但是，似乎没有任何效果。这是我的代码:

jQuery:

jQuery(function () {
    var path = location.pathname.substring(1);
    if (path)
        jQuery('.navigation ul li a[href$="' + path + '"]').attr('class', 'selected');
});

HTML:

<div class="navigation">
    <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="team.html">TEAM</a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="services.html">SERVICES</a></li>
        <li><a href="portfolio.html">PORTFOLIO</a></li>
        <li><a href="contact.html">CONTACT</a></li>
    </ul>
    <div class="clear"></div>
</div>

CSS:

.navigation li a.selected {
    background: url(../images/navigation-background-active.png) repeat-x;
    text-decoration: none;
}

如果您对我的要求感到困惑...您可以查看此链接: http://docs.jquery.com/Tutorials:Auto-Selecting_Navigation

非常感谢!

Answer 1

编辑:我查看了您的网站，path 的值为 portfolio/newish/index.html

可能你应该substring 基于lastIndexOf /。试试下面，

jQuery(function () {
    var path = location.pathname; //return /portfolio/newish/index.html
    path = path.substring(path.lastIndexOf('/') + 1); //will return index.html

    if (path)
        jQuery('.navigation ul li a[href$="' + path + '"]').addClass('selected');
});

您的代码看起来不错，但我认为您应该使用 .addClass 将类添加到元素。试试下面，

jQuery('.navigation ul li a[href$="' + path + '"]').addClass('selected');