JavaScript 實現點擊超鏈接改變顏色並去除下劃線

需求分析

點擊超鏈接（<a>）後，將其顏色改變並移除下劃線，同時取消其他鏈接的高亮狀態，類似導航菜單的激活態效果。

核心方案：CSS 類切換 + 事件委託

1. 定義樣式

<style>
a { 
    color: #333; 
    text-decoration: none;  /* 默認無下劃線 */
    transition: color 0.2s;
}
a:hover { color: #0066cc; }
a.active { 
    color: #ff0000; 
    font-weight: bold; 
    pointer-events: none; /* 可選：禁用再次點擊 */
}
</style>

2. 原生 JS 實現（推薦，無依賴）

document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a.nav-link'); // 可加類名範圍
    
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault(); // 阻止默認跳轉，若需跳轉請移除
            
            // 移除所有 active
            links.forEach(l => l.classList.remove('active'));
            // 添加當前
            this.classList.add('active');
            
            // 這裡可執行業務邏輯：載入內容、發送 AJAX 等
            console.log('激活:', this.href);
        });
    });
});

3. jQuery 版本（兼容舊項目）

$(function() {
    $('a.nav-link').on('click', function(e) {
        e.preventDefault();
        $('a.nav-link').removeClass('active');
        $(this).addClass('active');
    });
});

進階：單頁應用（SPA）路由聯動

若使用 Vue/React，綁定路由狀態自動控制 active 類：

<!-- Vue 示例 -->
<router-link to="/home" custom v-slot="{ navigate, isActive }">
  <a :class="{ active: isActive }" @click="navigate">首頁</a>
</router-link>

常見問題

總結

「CSS 定義狀態樣式，JS 切換類名」是處理交互高亮的標準模式。避免直接操作 style.color，保持結構與表現分離，便於維護與擴展。