Question

我正在尝试根据active添加url课程，以显示点击了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>

Note:我只能使用active添加url课程。因为每个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");
});

Answer 2

你错过了导航班前面的点.

应该是

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

如果你的location正确返回，它可以正常工作，你可以在这里找到一个最小的代码

注意：我已对网址进行了硬编码

$(document).ready(function() {
  pageUrl = '/employee/Home'
  $('#sidebar-left .nav li.active').removeClass("active");
  if (pageUrl) {
     $('.nav li:has(a[href="' + pageUrl + '"])').addClass("active");
  }
})

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

当网址与当前网页网址匹配时，我使用此脚本将活动类添加到元素。

$(function(){
       pageUrl = location.pathname;
       $('nav ul li a').each(function () {
            link = $(this);
            if (link.attr("href") == pageUrl) {
                link.addClass("active");
            } 
       });
   });

元素结构如下所示：

<nav>
    <ul>
        <li>
            <a href="/test/a/">Testing</a>
            <a href="/test/b/">Testing</a>
        </li>
    </ul>
</nav>

对于您的情况，您可以使用以下代码：

$(function(){
       pageUrl = location.pathname;
       $('#sidebar-left ul li a').each(function () {
            link = $(this);
            if (link.attr("href") == pageUrl) {
                link.parent().addClass("active");
            } 
       });
   });

根据url为菜单列表添加活动类

3 个答案: