如何使用 jQuery 動態切換選單項目上的單一活動類別？

使用jQuery 動態切換選單項目上的類別

在這篇文章中，我們遇到了一個場景，我們尋求在以下情況下動態新增和刪除類別：點擊特定的選單項目。目標是一次維護一個活動類，模仿典型的選單導航行為。

為了實現這一點，我們最初將「目前」類別新增至「關於連結」以指定其初始活動狀態。隨後，我們將一個事件監聽器附加到

上。選單中的元素。當任何

單擊後，它獲得“當前”類，而其兄弟姐妹則刪除該類，以確保排他性。

但是，為了從一開始就適當地反映活動狀態，我們可以改進我們的方法。我們可以利用修改後的事件處理程序，首先從目前擁有它的選單中任何現有的「a」元素中刪除「目前」類，而不是直接將「目前」類別新增到「about-link」中。然後，我們將“當前”類別新增到單擊的 元素。此調整保證「about-link」在沒有「current」類別的情況下啟動，並在整個選單互動過程中保持所需的單一活動狀態。

以下是經過此改進的增強型jQuery 代碼：

$('#menu li a').on('click', function(){
    $('#menu li a.current').removeClass('current');
    $(this).addClass('current');
});

這種方法可確保選單以預設狀態下的「about-link」開始，並在點擊其他選單項時動態切換活動類，遵循所需的功能。

以上是如何使用 jQuery 動態切換選單項目上的單一活動類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！