单击当前页面上的链接后保持菜单项处于活动状态

Question

基本上，我正在尝试将active 类添加到当前菜单项。我成功使用了下面的 jQuery 代码。

    jQuery(document).ready(function($){
        var path = window.location.href;
        $('#nav-main li a').each(function() {
            if (this.href === path) {
                $(this).addClass('active');
            }
        });
    });

我的导航栏是这样的：

    <ul id="nav-main">
        <li>
            <a href="/">Home</a>
        </li>
        <li>
            <a href="/brands">Brands</a>
        </li>
        <li>
            <a href="/users">Users</a>
        </li>
        <li>
            <a href="/employees">Employees</a>
        </li>
    </ul>

其中有以下 CSS：

    ul#nav-main {
        width: 1050px;
        margin: 0 auto;
        color: #fff;
    }
    ul#nav-main li {
        margin: 0 5px 0 5px;
        list-style-type: none;
        text-align: center;
        display: inline-block;
        font-size: 17px;
    }
    ul#nav-main li a {
        padding: 0 15px;
        line-height: 2.692307692;
        display: inline-block;
        text-decoration: none;
        color: #fff;
    }
    ul#nav-main li a:hover {
        background-color: rgba(0, 0, 0, 0.3);
    }
    ul#nav-main li a.active {
        background-color: rgba(0, 0, 0, 0.3);
    }

现在，当我单击“用户”时，我转到 /users，jQuery 代码成功添加了 active 类，因此“用户”显示为导航栏中的当前菜单项。但是，当我单击“用户”页面上的链接时，该链接指向例如 /users/view/12345（其中 12345 是用户的 ID），“用户”页面未显示为当前菜单项了。

我认为这与 jQuery 代码仅查看 nav-main li a 而不是页面上的其他 a 的事实有关。有什么我可以添加到我的 jQuery 代码中来完成这项工作的吗？

Answer 1

尝试改变

var path = window.location.href;

到这里：

var path = "/" + window.location.pathname.split('/')[1];

pathname 在第一个斜杠之后（包括）检索所有内容。 split 将根据定义的分隔符 ('/') 将字符串分解为字符串列表，我们将选择索引为 1 的项目。

Answer 2

试试这个。为我工作。网上找的，不记得出处了。

var i = document.location.href.lastIndexOf("/");
var current = document.location.href.substr(i+1);

    $("#nav-main a").removeClass('active');

    $("#nav-main a[href^='"+current+"']").each(function(){
        $(this).addClass('active');
    });