菜单和父项上的活动类

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课程中添加，但如果当前网址为该链接的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. 获取当前页面网址
2. 导航中的每个链接......
3. 检查其href是否在当前网址
4. 如果是，请添加“active-nav”类
5. 关闭if语句
6. close for loop

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

您可以使用.parent li:first-child, .parent li:last-child { background-color: red; } 方法查找相应的链接并添加所需的类：

.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'); }); 。