jQuery 實現導航欄點擊高亮切換（單一激活狀態）

問題現象

頁面加載時首項高亮，點擊其他項時，舊項未取消高亮，導致同時存在多個高亮項。

根因分析

原代碼：

$('.menu ul li').eq(0).addClass("act");
$('ul li').each(function(){
  $(this).click(function(){
    $(this).addClass("act").siblings().removeClass("act");
  });
});

.siblings() 僅移除當前 ul 下的同級 li 的 class，但頁面有兩個 .menu 和 .menu2 兩個 ul，點擊其中一個列表的項，不會影響另一個列表的高亮狀態。

修正方案：統一選擇器範圍

$(function(){
  // 1. 初始化：僅第一個導航的第一項高亮
  $('.menu ul li').eq(0).addClass("act");
  
  // 2. 綁定點擊：針對所有導航列表
  $('.menu ul li, .menu2 ul li').click(function(){
    // 移除所有列表的高亮
    $('.menu ul li, .menu2 ul li').removeClass("act");
    // 當前項添加高亮
    $(this).addClass("act");
  });
});

優化版：使用事件委托與數據屬性

$(function(){
  // 初始化
  $('.nav-list li[data-index="0"]').addClass('act');
  
  // 事件委托：父容器綁定一次
  $('.nav-container').on('click', '.nav-list li', function(){
    var $this = $(this);
    // 同組內切換（若需跨組互斥，調整選擇器）
    $this.closest('.nav-list').find('li').removeClass('act');
    $this.addClass('act');
  });
});

HTML 結構建議：

<div class="nav-container">
  <ul class="nav-list"><li data-index="0">首頁</li>...</ul>
  <ul class="nav-list"><li data-index="0">首頁</li>...</ul>
</div>

總結

• 高亮切換的核心：先清除同組所有項的 active class，再給當前項添加。
• 多導航列表時，選擇器必須覆蓋所有列表，或使用事件委托統一管理。