Question

我有一个页面，其中包含由内部锚点组成的菜单项列表。我正在尝试将.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

你有错误的选择器来绑定锚元素上的click事件。你也不需要在这里调用setActiveLinks()函数（它基于href设置类）。

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

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

<强> Working Demo

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

1 个答案: