使用jQuery設置活動菜單項

我正在做的事：一個常規菜單，它具有不同風格的當前活動頁面。使用jQuery設置活動菜單項

HTML（正常工作）

<div> 
    <ul class="nav">  
     <li> 
      <a class="active" href="#"> 
       <span>one</span> 
      </a> 
     </li> 

     <li> 
      <a href="#"> 
       <span>two</span> 
      </a> 
     </li> 

     <li> 
      <a href="#"> 
       <span>three</span> 
      </a> 
     </li> 
    </ul>  
</div>

CSS（正常工作）

.nav .active { 
    color: #fff; 
    background-color: #000; 
}

JS（不工作）

$('a').click(function(){ 
    $(this).addClass('active') 
     .siblings() 
     .removeClass('active'); 
});

Codepen從Sara Soueidan's Codepen拍攝。

Sara Soueidan的版本甚至無法在codepen中複製（瞄準a和li）。另一個版本，我發現使用以下JS：

$('.nav li').click(function() { 
     $('.nav li').removeClass('active'); 
     $(this).addClass('active'); 
});

這個版本似乎是工作，但是對於我不明白，我需要三倍點擊菜單鍵，以便兩者都使用URL某些原因並設置活動的類。

任何人都可以從這個平庸事物中發現一些光明嗎？

來源

2016-12-22 Jan Cavel

您可以爲需要三次點擊的問題添加演示 – guradio

問題：是此行$(this).addClass('active').siblings().removeClass('active');

其實沒有siblings到a一個li

解決方案中：您需要首先從a標籤取下active類，然後添加到$(this)

$('a.active').removeClass('active'); 
$(this).addClass('active');

來源

2016-12-22 11:01:04

謝謝。（''li'）。click（function（）{ \t \t $（'li.active'）。removeClass（'active'）; \t \t $（this）.addClass（'主動'）; }）;'但我仍然需要三擊才能更改URL並設置活動類。我無法在codepen中複製它，因爲我無法訪問URL層次結構。 –

@JanCavel我不明白'三重檢查'這個詞可以詳細說明嗎？ –

我在頁面'one'。我點擊頁面的'two'按鈕，瀏覽器改變URLs，但是仍然沒有爲兩個'li'設置活動類，所以我必須快速雙擊。共三次點擊。 –

經過超過我想承認的時間之後，我發現在按下菜單按鈕時我甚至不需要設置'li'的活動類，但是我必須檢查當前URL是否包含該部分的菜單。

因此，我鏈式快速正髒IF-ELSEIF在JS：

$(document).ready(function() { 
    if(window.location.href.indexOf("one") > -1) { 
     $('.nav-container ul li').eq(1).addClass("active"); 
    } else if(window.location.href.indexOf("two") > -1) { 
     $('.nav-container ul li').eq(2).addClass("active"); 
    } else $('.nav-container ul li').eq(0).addClass("active"); 
});

要測試URL包含字符串「一」，我用：

window.location.href.indexOf("one") > -1

然後我使用eq（i）來定位具體的'li'，其中我從0到n-1個菜單項。

不是最好的解決方案，但它適用於5項以下的菜單，並且如果「一個」菜單項有一些像「one-one」，「one-two」等孩子，也可以很好地工作。

來源

2016-12-23 09:24:43

使用jQuery設置活動菜單項

回答

相關問題