Question

好，

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

我尝试了很多东西。但是，似乎没有任何工作。这是我的代码：

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

修改：我查看了您的网站，路径值为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');

Answer 2

您是否确认location.pathname.substring(1)正在输出您的预期？也就是说，index.html等？

path function works（由于iframe，JS添加了show，并且您的选择器看起来正确，所以我唯一能想到的是您希望它输出的路径不是什么正在您的网站上输出。

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

2 个答案: