Question

我有一个链接列表，使用锚标记链接到页面中的部分。我正在尝试在用户加载页面时最初获取当前类名，并将“active”类添加到列表项中。例如，如果用户访问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根据视图中的哪个部分更改类？

Answer 1

您只需将“点击”处理程序绑定到<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>而非其父<li> - 感谢@scessor进行更正。

Answer 2

如果我理解正确，你会得到一个URL： var URL = www.mydomain.com/#about-section 你可以通过以下方式获得锚标记：

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

然后你可以获得与href的链接：

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

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

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

Answer 3

我认为这样的事情可以解决问题。未经测试。

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
}

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

3 个答案: