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

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

2 个答案: