jQuery中的addClass

Question

我在JQuery中很新，我對addClass（）有個疑問。我花了一些時間來嘗試這個工作，但似乎我做錯了什麼。我用HTML和bootstrap創建了一個頂級菜單。我假設訪客首先登陸我的index.php，因此我爲index.php創建了class =「active」。然後，如果他們點擊頂部菜單上的任何其他鏈接（例如關於我們），那麼class =「active」將添加到index.php的「li」選項卡中並從中刪除class =「active」。

下面是我的HTML代碼：

<div class="nav-collapse collapse"> 
    <ul class="nav pull-right"> 
     <li id="home" class="active"><a href="index.php"> Home</a></li> 
     <li id="about"><a href="about_us.php"> About Us</a></li> 
     <li id="browse"><a href="browse.php"> Browse</a></li> 
     <li id="contact"><a href="contact.php"> Contact</a></li> 
    </ul> 
</div> 

及以下，我使用，並嘗試完成這件事的jQuery代碼。

$(function(){    
    var sidebar = $('.nav'); 
sidebar.delegate("li", "click", function(){ 
    if($(this).hasClass('active')){ 
    //If click on the tab that is currently active, it will do nothing. 
    }else{  
      sidebar.find('.active').addClass('inactive'); 
      sidebar.find('.active').removeClass('active'); 
      $(this).removeClass('inactive');    
      $(this).addClass('active'); 
     } 
    }); 
}); 

我在本地服務器上測試了它。點擊後，我可以看到頂部菜單中的選項卡變成灰色，但沒有保留。所以我確信我做錯了什麼，但不知道在哪裏。我在JQuery中真的很新，所以我希望我能向你們學習。謝謝！

Answer 1

點擊鏈接後，瀏覽器會跳轉到一個全新的頁面，它會啓動一個全新的JavaScript環境，並且您對當前頁面所做的任何操作都不會傳遞到新加載的頁面。

因此，可以在當前頁面上更改活動類，但隨後會加載一個全新的頁面，它不會從第一頁繼承任何內容（例如，它從頭開始）。新頁面加載後，您的第一頁代碼不再播放。

您需要將活動類編碼到每個單獨的頁面（因爲每個頁面都知道它是哪個頁面），或者有一個共同的JS集合，它在頁面根據URL加載時設置活動類，所以它是在頁面加載時正確初始化。

---

另外，您可能不需要非活動類。默認的CSS狀態可以表示不活動的外觀，活動類可以應用CSS覆蓋來顯示活動狀態。

Answer 2

這不起作用，因爲當有人點擊另一個鏈接時，他們被重定向到不同的頁面。但是，您的標題並不真正知道哪個鏈接被點擊了，也不知道它在哪個頁面上。你需要讓你的標題知道你是哪一頁。這有意義嗎？

Answer 3

其他答案是正確的，當你點擊標籤你打開一個新的頁面，因此失去了你的JavaScript環境。

如果您想擁有單頁面應用程序，可以使用preventDefault來停止瀏覽器關注鏈接。

sidebar.delegate("li", "click", function(e){ 
    e.preventDefault(); 
    if($(this).hasClass('active')){ 
     //If click on the tab that is currently active, it will do nothing. 
    }else{ 
     sidebar.find('.active').addClass('inactive'); 
     sidebar.find('.active').removeClass('active'); 
     $(this).removeClass('inactive');    
     $(this).addClass('active'); 
    } 
});