菜單和父項上的活動類

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 。