Javascript 在页面加载jQuery上检索导航类名

我有一个链接列表，使用锚定标签链接到页面中的各个部分。当用户加载页面并将“active”类添加到列表项中时，我试图首先获取当前类名。例如，如果用户访问www.mydomain.com/#about部分，导航将删除现有的“活动”类，然后将该类添加到当前链接

 <nav id="primary">
    <ul>
      <li class="active"><a href="#intro-section">Home</a></li>
      <li><a href="#work-section">Work</a></li>
      <li><a href="#about-section">About</a></li>
      <li><a href="#contact-section">Contact</a></li>
    </ul>
  </nav>

根据使用jQuery查看的节，我如何更改类？

您只需将“单击”处理程序绑定到

标记

$('nav').delegate('a', 'click', function() {
  $(this).closest('ul').find('li').removeClass('active');
  $(this).closest('li').addClass('active');
});

如果你的导航结构更深或更复杂，你需要使用更具体的选择器

编辑-如果希望在页面加载时发生这种情况，则必须在“就绪”处理程序中执行以下操作：

---

已编辑-上面的代码最初将“活动”添加到

中，而不是它的父项

-感谢@scessor的更正。

我认为这样做可以达到目的。没有测试

var hash = window.location.hash;
if (hash != '') {
    //remove active class
    $('.active').removeClass('active');
    //attach active class to anchor
    $('a [name="' + hash + '"]').addClass('active');  //link anchors
    $('* [id="' + hash + '"]).addClass('active');     //id anchors
}

---

如果我理解正确，您会得到如下URL：

var URL=www.mydomain.com/#关于部分

您可以通过以下方式获取锚定标记：

 var anc =  URL.split('#')[1]; // 'about-section'

然后您可以通过href获取链接：

var aLink = $('a[href='+anc +']');

最后删除所有活动类，获取li并添加活动类

$('li','#primary').removeClass('active');
    aLink.closest('li').addClass('active');

---

锚定ID或链接是否具有名称

或

对于“ready”处理程序，相应的部分类似于

：应该先删除“active”类，然后再添加（到

li

！）。嗯@scessor我想是的，但我认为在新加载的页面上，任何地方都不会应用“active”类。好的，在上面的html代码中，它似乎是静态的，但您是对的，它不应该是静态的。但是您将活动类添加到

a

标记中，而不是添加到

li

中。

$('li','#primary').removeClass('active');
    aLink.closest('li').addClass('active');