使用 jQuery 實現列表項點擊切換顏色效果

需求描述

有一組 <ul> 列表，預設「歷史」項高亮。點擊「選集」時，需將「選集」文字變淺色，「歷史」恢復預設色。

HTML 結構

<ul class="main_lower_ui">
  <li>選集</li>
  <li class="selected">歷史</li>
</ul>

jQuery 實現

$('.main_lower_ui li').click(function(){
  $(this).css('color','blue').siblings().css('color','#000');
});

原理解析

• $(this) 獲取當前點擊的 <li>。
• .css('color','blue') 設定其文字顏色為藍色（淺色）。
• .siblings() 選取同層其他 <li>，並將顏色重置為黑色。