javascript - 在页面加载 jQuery 时检索导航类名称

Question

我有一个链接列表，这些链接使用 anchor 标记链接到页面中的部分。当用户加载页面并将“事件”类添加到列表项时，我最初试图获取当前类名。因此，例如，如果用户转到 www.mydomain.com/#about-section，导航将删除现有的“事件”类，然后将该类添加到当前链接。

 <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 根据 View 中的哪个部分更改类？

Answer 1

好吧，您只需将“点击”处理程序绑定(bind)到 <a>标签。

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

如果您的导航结构更深或更复杂或其他什么，您需要使用更具体的选择器。

编辑 — 如果您希望在页面加载时发生这种情况，您必须在“就绪”处理程序中做一些事情:

$(function() {
  $('nav a[href="' + window.location.hash + '"]').closest('li').addClass('active');
});

已编辑 — 上面的代码最初将“事件”添加到 <a>而不是它的 parent <li> - 感谢@scessor 的更正。