javascript - 使用内部 anchor 将类添加到事件菜单项

Question

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

当单击新的菜单项时，我想删除所有其他事件类并将此类添加到单击的项目中。

听起来很简单，但我无法让它发挥作用。我创建了这个Fiddle ，但它没有正确显示问题，因为我无法将哈希值添加到网址中。

但是，也许有人可以指出我正确的方向。

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

您使用了错误的选择器来绑定(bind) anchor 元素上的单击事件。您也不需要在这里调用 setActiveLinks() 函数(根据 href 设置类)。

您可以使用单击的 anchor 元素的上下文遍历到父li并在其中添加事件类:

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

<强> Working Demo