javascript - 根据 url 为菜单列表添加事件类

Question

我正在尝试添加基于 url 的 active 类，以显示单击了哪个 li。

pageUrl = location.pathname;
$('#sidebar-left nav li.active').removeClass("active");
if (pageUrl) {
  $('nav li:has(a[href="' + pageUrl + '"])').addClass("active");
}

这是我在 init() 方法中尝试过的。
我正确获取了 pageUrl。但无法为单击的 li 添加事件类。

html:

<div id="sidebar-left" class="col-xs-2 col-sm-2">
            <ul class="nav main-menu">
                <li class="dropdown ng-scope" ng-repeat="parent in menu">
                    <a href="/employee/Home" class="dropdown-toggle" ng-click="tabName(parent.name)">
                        <i class="fa fa-home"></i>
                        <span class="hidden-xs ng-binding">Home</span>
                    </a>                       
                </li>
                <li class="dropdown ng-scope" ng-repeat="parent in menu">
                    <a href="/documents/doc_details" class="dropdown-toggle" ng-click="tabName(parent.name)">
                        <i class="fa fa-file-text"></i>
                        <span class="hidden-xs ng-binding">Documents</span>
                    </a>                       
                </li>
                <li class="dropdown ng-scope" ng-repeat="parent in menu">
                    <a href="#" class="dropdown-toggle" ng-click="tabName(parent.name)">
                        <i class="fa fa-money"></i>
                        <span class="hidden-xs ng-binding">Pay &amp; Benifits</span>
                    </a>
                    <ul class="dropdown-menu">
                       <li ng-repeat="child in parent.children" class="ng-scope">
                            <a href="/pay/paymanagement" ng-click="tabName(child.name)" class="ng-binding">slips</a>
                        </li>
                    </ul>
                </li>                    
            </ul>
        </div>

注意: 我只能使用 url 添加 active 类。因为每个 li 都有不同的页面，所以每当我点击 li 时，页面就会刷新。所以我不能 css/onclick/.click 这里。

请给我一些建议。

Answer 1

当您设置 href url 时，它会自动转换为 JavaScript 中的完整 URL。所以你的代码中的路径名将不起作用。相反，让我们使用 jquery 中的 filter() 方法。

$(function() {
    $('#sidebar-left nav li.active').removeClass("active");
    $('#sidebar-left nav li a').filter(function(){
        return this.href.indexOf(window.location.href) !== -1;
    }).parent().addClass("active");
});