javascript - 单击当前页面上的链接后保持菜单项处于事件状态

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 是一个用户)，“用户”页面不再显示为当前菜单项。

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

Answer 1

尝试改变

var path = window.location.href;

为此:

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

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