jQuery 導航欄點擊切換 active 樣式不生效的原因與修復

導航欄 HTML 結構中，<li> 帶有 cname 類表示當前激活態，jQuery 綁定點擊事件移除/添加該類，但點擊後樣式不變。

問題根因

CSS 選擇器權重問題：#Nav .cname 針對 <li> 設定背景色，但 <a> 標籤內部可能有自己的背景或顏色覆蓋，導致視覺上「沒變」。

解決方法

將激活態樣式直接應用到 <a> 標籤：

#Nav .cname a { background-color: #ff7a00; color: #fff; }

或在 jQuery 中操作 <a> 的類：

$('#Nav ul li a').click(function() {
    $('#Nav ul li a').removeClass('active');
    $(this).addClass('active');
});

並將 CSS 改為 #Nav ul li a.active { ... }。

經驗總結

• 導航互動樣式建議直接加在 <a> 上，避免被內聯元素覆蓋。
• 使用瀏覽器開發者工具檢查元素計算樣式，快速定位覆蓋關係。