如何使用 jQuery 管理選單項目的活動狀態？

使用jQuery 更改選單項目的狀態

在這篇文章中，我們將深入研究如何利用jQuery 的功能來動態管理類選單中列表項目的樣式。目標是在單擊時將“當前”類別新增至特定清單項，並同時將其從所有其他項目中刪除。

初始設定

啟動功能，我們首先需要用

定義選單項目使用 標籤的元素和連結。我們將在清單項目連結之一中新增「目前」類，以指示最初選定的項目：

新增事件監聽器

使用 jQuery ，我們將事件偵聽器附加到每個列表項目的連結來處理點擊event:

說明

在事件偵聽器中， jQuery 程式碼片段執行以下任務：

1. 新增'目前'類別到點擊的清單項目的連結使用$(this).addClass('current').
2. 使用$('#menu li a.current').not(this).removeClass從所有其他清單項目連結中刪除'current' 類別（'當前的'）。此行選擇具有“當前”類別的所有鏈接，並排除當前單擊的鏈接。

結果

因此，當使用者點擊任何選單項目的連結將獲得「目前」類別樣式，而「目前」類別將從先前活動的項目中刪除。這可確保在任何給定時間只有一個清單項目連結具有目前樣式。

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