jQuery是一種流行的JavaScript庫,可以輕松處理HTML文檔的遍歷、事件處理和動畫效果等。當涉及到為網站添加選中狀態時,jQuery可以方便地通過添加CSS類來完成。下面是如何使用jQuery為li元素添加選中狀態的過程。
// 為所有li元素添加單擊事件 $('li').click(function(){ // 首先刪除所有元素的selected類 $('li').removeClass('selected'); // 然后添加當前元素的selected類 $(this).addClass('selected'); });
以上代碼做了什么?首先,我們在所有li元素上添加了單擊事件。在單擊事件觸發時,我們將刪除任何具有selected類的元素的該類,并使用addClass()方法為當前單擊的元素添加selected類。
最后,我們可以使用CSS來定義selected類的樣式,以使選中的元素看起來與其他元素不同。例如:
.selected { background-color: #0066CC; color: #FFFFFF; }
這樣,單擊任何li元素時,將刪除其他所有已選中的元素的selected類,并將當前選中的元素添加selected類,從而高亮顯示。