如何使用 jQuery 的 `addClass()` 和 `removeClass()` 一次只突出顯示一個清單項目？

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

使用清單選單項目時，通常需要透過以下方式突出顯示當前活動的項目添加一個類別。但是，您可能會遇到確保一次只有一項具有該類的挑戰。

要解決此問題，請使用 jQuery 的 addClass() 和 removeClass() 方法。首先，將類別新增至所需的起始元素，例如「about-link」。然後，在清單項目（“menu li”）上使用事件偵聽器來處理點擊。

在事件偵聽器內，利用siblings() 方法從所有其他清單項目元素中刪除該類別。這可確保只有單擊的元素保留該類別。但是，要從「about-link」活動開始，我們需要新增一行額外的程式碼：

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

在此修改後的程式碼中，我們選擇清單項目中的「a」元素（'選單li a') 以確保我們定位到連結。然後，我們使用當前類別作為選擇器，將其從任何先前活動的連結中刪除，然後再將其新增至單擊的連結。這消除了在初始 JavaScript 中手動將類別新增至「about-link」的需要。

以上是如何使用 jQuery 的 `addClass()` 和 `removeClass()` 一次只突出顯示一個清單項目？的詳細內容。更多資訊請關注PHP中文網其他相關文章！