HTML LinkButton 點擊切換背景色：jQuery 單選高亮實戰

需求

點擊某個 LinkButton（或普通 <a>）後，該元素背景變紅，同組其他元素恢復原狀，模擬單選 Tab 效果。

jQuery 一鍵實現

$("#filter a").click(function() {
    // 1. 移除所有同組元素的選中樣式
    $(this).parents("dl").children("dd").each(function() {
        $('a', this).removeClass("seled");
    });
    // 2. 給當前點擊元素添加選中樣式
    $(this).addClass("seled");
});

CSS 樣式定義

.seled { 
    background-color: #ff0000; 
    color: #fff; 
    padding: 5px 10px; 
    border-radius: 3px; 
}

HTML 結構示例

<div id="filter">
    <dl>
        <dd><a href="#" class="seled">選項一</a></dd>
        <dd><a href="#">選項二</a></dd>
        <dd><a href="#">選項三</a></dd>
    </dl>
</div>

關鍵點解析

• parents("dl")：向上查找最近的容器，確保多組選項互不干擾。
• children("dd")：只遍歷直接子元素，效率高。
• each() + removeClass：批量清除舊樣式。
• addClass：為當前元素添加高亮類。

進階：結合 ASP.NET LinkButton

若使用 asp:LinkButton，渲染為 <a> 標籤，同樣適用。若需 Postback，可在 click 事件中 return true; 或使用 OnClientClick 返回 false 阻止默認行為改用 AJAX。

無 JS 降級方案

若用戶禁用 JS，可在服務端 ItemCommand 中設置 CssClass，配合 UpdatePanel 局部刷新。