如何使用 jQuery 在點擊時切換 CSS 類別來管理活動選單項目？

使用 jQuery 在點擊事件上切換 CSS 類別

為了使用 jQuery 動態新增並移除點擊事件上的 CSS類，讓我們探索以下內容

問題：選單由清單項目組成，需要特定的班級才能活躍。單擊某個項目後，應僅將類別新增至該項目，同時將其從所有其他項目中刪除。最初，“about-link”預設應具有“current”類別。

解決方案：

要解決此問題，我們可以使用以下jQuery代碼：

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

在此代碼：

• $('#menu li a') 選擇所有
• 內的元素ID 為「menu」的元素的後代元素。
• .on('click', function()) 為這些元素註冊點擊事件偵聽器。
• 在事件處理程序內, .removeClass('current') 從目前活動元素中刪除「目前」類別。
• .addClass('current') 將「目前」類別新增至按一下的元素。

透過遵循此方法，「about-link」最初將使用 $('#about-link').addClass('current ');。當點擊選單中的任何其他項目時，「目前」類別將從先前的活動項目中刪除並新增到點擊的項目中，確保只有一個項目始終保持活動狀態。

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