如何使用 jQuery 在點擊時新增和刪除 CSS 類別？

如何使用 jQuery 在點擊時新增和刪除類別？

在 jQuery 中，您可以使用 addClass( 動態操作元素上的 CSS 類別) )、removeClass() 和toggleClass() 方法。這對於實現動態行為非常有用，例如新增或刪除活動狀態或突出顯示選單項目。

範例：在點擊時新增和刪除類別

假設您有一個帶有

的選單元素。您想要將「目前」類別新增至按一下的元素，同時將其從所有其他元素中刪除。這確保一次只有一個元素具有“當前”類別。

這是一個jQuery 解決方案：

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

此程式碼使用事件委託將點擊處理程序附加到所有

李>容器內ID 為“menu”的元素。當您按一下某個元素時，它會將「目前」類別新增至自身，並使用siblings() 方法從其所有同級中刪除相同的類別。

其他注意事項：初始化「目前」類別

$('#about-link').addClass('current');

最初，您需要在其中一個選單項目上設定「目前」類別。您可以使用以下方法執行此操作：

這會將「目前」類別新增至 ID 為「about-link」的元素，確保它會作為活動項目開始。

改進的解決方案

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

這是一個改進的解決方案，簡化了程式碼：

這與之前的程式碼類似，但目標是

內的元素項目。預設情況下，

元素沒有 href 屬性，因此不會直接觸發點擊事件。

以上是如何使用 jQuery 在點擊時新增和刪除 CSS 類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！