使用内部锚点将类添加到活动菜单项

Question

我有一个页面，其中包含由内部锚点组成的菜单项列表。我正在尝试向所选项目添加一个 .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();
});

.HTML：

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

谢谢：-）

Answer 1

您有错误的选择器来绑定锚元素上的单击事件。 此外，您不需要在此处调用setActiveLinks()函数（根据 href 设置类）。

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

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

工作演示