JQuery中的addClass

Question

我是JQuery的新手，我對addClass（）有疑問。 我花了一些時間嘗試使它正常工作，但似乎我做錯了什么。 我用HTML和引導程序創建了一個頂層菜單。 我認為訪問者將首先登陸我的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');
     }
 });