菜单和父项上的活动类

Question

我的菜单有这个 HTML 代码：

<nav id="main-navigation" class="navigation-simple">
<ul>
    <li><a href="/">Home</a></li>           
    <li><a class="active-nav" href="">About Us</a>
    <ul>                        
        <li><a class="active-nav" href="about">About</a></li>               
        <li><a href="testimonials">Testimonials</a></li>
        <li><a href="meet-the-team">Meet The Team</a></li>  
    </ul>
    </li>
</nav>

我已经添加了active-nav类，但是当当前 URL 是链接的href值时，如何在父项和子项上自动设置活动类？

Answer 1

为此，您需要 Java 脚本，jQuery 非常适合初学者！

可以这样做：

var url = window.location.href;
$( "nav li a" ).each(function(index) { 
  if (url.indexOf($(this).attr('href')) >= 0){ 
    $(this).addClass('active-nav');
  }
});

逐行 -

1. 获取当前页面 url
2. 对于导航中的每个链接...
3. 检查它的 href 是否在当前 url 中
4. 如果是，请添加“active-nav”类
5. 关闭 if 语句
6. 关闭 for 循环

Answer 2

就像是：

$(function() {
  $('#main-navigation a').each(function() {
    if(this.href.indexOf(window.location.pathname) === 0) {
      $(this).addClass('active-nav');
    } else {
      // case when something was set to active by the server
      $(this).removeClass('active-nav');
    }
  });
});

会做的工作。

确保 if 条件对您的站点深层链接实现安全（例如，在导航中可以使用 GET 参数、锚点或具有相同路径名的多个域）。

Answer 3

您可以使用.filter()方法找到适当的链接并添加所需的类：

$('#main-navigation li > a').removeClass('active-nav')
.filter(function() {
    return location.href.indexOf(this.href) > -1;
})
.addClass('active-nav') //add class to matched element(s)
//add class to parent(s) of matched, if any
.each(function() {
    $($(this).parents('a'), '#main-navigation').addClass('active-nav');
});

还记得关闭你的第一个ul 。