Javascript 将类添加到具有内部锚定的活动菜单项

我有一个包含菜单项列表的页面，菜单项列表由内部锚点组成。我正在尝试将.active类添加到所选项目。它似乎可以在加载时工作，但在同一页面中单击新项目时却不能

单击新菜单项时，我希望删除所有其他活动类，并将该类添加到单击的项中

听起来很简单，但我不能让它工作。 我创建了这个，但它没有正确地显示问题，因为我无法向url添加哈希

然而，也许有人能给我指出正确的方向

JS:

function setActiveLinks() {
  var current = location.pathname;
  $('.bs-docs-sidenav li a').each(function() {
    var $this = $(this);
    // Get hash value
    var $hash = location.href.substr(location.href.indexOf('#') + 1);
    if ($this.attr('href') == '#' + $hash) {
      $this.parent().addClass('active');
    }
  })
}

setActiveLinks();

$('#leftmenu li a').click(function() {
$('#leftmenu li').removeClass('active');
  setActiveLinks();
});

<ul class="nav bs-docs-sidenav">
  <li>
    <a href="#download">Download</a>
  </li>
  <li class="active">
    <a href="#whats-included">What's included</a>
    <ul class="nav">
      <li class="active"><a href="#whats-included-precompiled">Precompiled</a></li>
      <li><a href="#whats-included-source">Source code</a></li>
    </ul>
  </li>
  <li>
    <a href="#grunt">Compiling CSS and JavaScript</a>
    <ul class="nav">
      <li><a href="#grunt-installing">Installing Grunt</a></li>
      <li><a href="#grunt-commands">Available Grunt commands</a></li>
      <li><a href="#grunt-troubleshooting">Troubleshooting</a></li>
    </ul>
  </li>
</ul>

HTML:

function setActiveLinks() {
  var current = location.pathname;
  $('.bs-docs-sidenav li a').each(function() {
    var $this = $(this);
    // Get hash value
    var $hash = location.href.substr(location.href.indexOf('#') + 1);
    if ($this.attr('href') == '#' + $hash) {
      $this.parent().addClass('active');
    }
  })
}

setActiveLinks();

$('#leftmenu li a').click(function() {
$('#leftmenu li').removeClass('active');
  setActiveLinks();
});

<ul class="nav bs-docs-sidenav">
  <li>
    <a href="#download">Download</a>
  </li>
  <li class="active">
    <a href="#whats-included">What's included</a>
    <ul class="nav">
      <li class="active"><a href="#whats-included-precompiled">Precompiled</a></li>
      <li><a href="#whats-included-source">Source code</a></li>
    </ul>
  </li>
  <li>
    <a href="#grunt">Compiling CSS and JavaScript</a>
    <ul class="nav">
      <li><a href="#grunt-installing">Installing Grunt</a></li>
      <li><a href="#grunt-commands">Available Grunt commands</a></li>
      <li><a href="#grunt-troubleshooting">Troubleshooting</a></li>
    </ul>
  </li>
</ul>

---

谢谢。：-）

绑定锚元素上的单击事件的选择器错误。此外，您不需要在此处调用

setActiveLinks（）

函数（该函数基于href设置类）

您可以使用单击的锚元素的上下文遍历到父li，并在其中添加活动类：

var $navLIs = $('.nav li')
$navLIs.find('a').click(function() {
  $navLIs.removeClass('active');
  $(this).parent().addClass('active');
});