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

好,

因此，我试图实现的是用表示当前最终用户所在页面的“选定”类更新导航

我试过很多东西。但是，似乎什么都不起作用。这是我的密码：

jQuery:

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

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

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

HTML:

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

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

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

如果你对我的要求感到困惑。。。您可以查看此链接：

---

非常感谢你

编辑：我查看了你的网站，路径的值是

portfolio/newish/index.html

可能您应该基于

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');
});

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

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

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');
});

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

您是否验证了
location.pathname.substring（1）
正在输出您期望的内容？也就是说，
index.html
等等

（由于iframe，JS添加了
show
），您的选择器看起来是正确的，所以我唯一能想到的是，您希望它输出的路径不是您站点上正在输出的路径。
不确定这是否解决了您的问题，但您也可以将选择器缩短为
。[href]$=“'+path+'”]'
@MikeTangolics:Welp，他们都没有解决我的问题，但他们确实缩短了我的代码。谢谢！@SKS:谢谢，但没有解决。@AaronBrewer你能记录/提醒jQuery吗（'.navigation ul li a[href$=“+path+']”）.length要查看它是否返回>0，请尝试检查path..addClass如果可以选择链接，它应该可以工作。@SKS:我不知道你在说什么，lol。但是，更好的解决方法可以解决你的问题。你可以在这里查看我的问题：