文章/答案/技术大牛

发布

社区首页 >问答首页 >在页面加载jQuery上检索导航类名

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

Stack Overflow用户

提问于 2011-11-05 02:31:39

回答 3查看 569关注 0票数 1

我有一个链接列表，链接到页面内使用锚标签的部分。当用户加载页面并将"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根据视图中的哪个部分来更改类？

javascript

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-11-05 02:38:37

您只需将“单击”处理程序绑定到<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');
});

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

票数 2

Stack Overflow用户

发布于 2011-11-05 02:48:36

如果我没理解错的话，你会得到一个类似于：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');

票数 1

Stack Overflow用户

发布于 2011-11-05 02:41:18

我认为像这样的东西会起作用的。未测试。

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
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8014116

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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