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

Retrieve navigation class name on page load jQuery

本文关键字：加载 jQuery 导航 检索      更新时间：2023-09-26

我有一个链接列表，这些链接使用锚标记链接到页面内的部分。当用户加载页面并将"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视图?

那么，您只需将"click"处理程序绑定到<a>标记。

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

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

编辑本;如果您希望在页面加载时发生这种情况，您必须在"ready"处理程序中做一些事情:

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

编辑本;上面的代码最初将"active"添加到<a>而不是其父<li> -感谢@scessor的更正。

如果我理解正确，你会得到一个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');

我想这样做会有效果。不是测试。

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
}
相关文章：