无法将活动类添加到菜单列表

Question

我的页面中有侧面菜单栏。单击菜单列表时，页面将被重定向，具体取决于href。

重定向页面后，我需要使用url为点击的li添加活动类，以保持菜单列表的打开状态。我已经编写了以下代码来实现这一目标。

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

我在这里为url硬编码样本。
现在我的问题是每当我点击list时，active课程都会添加到href页面的内容中。
即。此网址href="/documents/doc_details"页面包含nav list，每个li都有forms，因此active类已添加到href="/documents/doc_details"的完整内容。
I不明白为什么我不能仅将active课程添加到点击的li？

只是一个示例：https://jsfiddle.net/tphdp1fa/（没有内页）

任何人都可以帮助我吗？谢谢!!。

Answer 1

对click标记使用a事件，如以下代码段所示，以启用和禁用活动类。

Fiddle Demo

示例：

＆＃13;

＆＃13;

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

$("body").on("click", "a", function(e) {
  e.preventDefault(); //Prevented the default action of "a" tag for demo
  pageUrl = $(this).attr("href");//Give your own link here
  $('#sidebar-left .nav li.active').removeClass("active");
  if (pageUrl) {
    $('.nav li:has(a[href="' + pageUrl + '"])').addClass("active");
  }
});

＆＃13;

.active {
  color: red;
}

a {
  text-decoration: none;
  color: black;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

注意：我已阻止＆＃34; a＆＃34;的默认操作使用e.preventDefault();

标记