當 javascript 中的 className 更改時，HTML 錨標記停止工作

Question

我試圖攔截對標簽的點擊以更改 CSS class 被選中，然后我希望進程繼續到語句中指定的 href。 我創建了一個 javascript function 更改了三個感興趣的鏈接的類，但由於某種原因，這些鏈接不執行跳轉到 href 中指定的地址的默認操作。 class 值按預期變化。 誰能看到我做錯了什么？

HTML（cshtml 視圖的一部分）：

ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
    <a class="nav-link active nav-data-tab" onclick="setActiveTab(1)" id="NI-ColonyData" data-toggle="tab" href="#ColonyData"><h4>Colony Data</h4></a>
</li>
<li class="nav-item">
        <a class="nav-link" onclick="setActiveTab(2)" id="NI-Weather" data-toggle="tab" href="#Weather"><h4>Weather</h4></a>
</li>
<li class="nav-item">
        <a class="nav-link" onclick="setActiveTab(3)" id="NI-Actions" data-toggle="tab" href="#Actions"><h4>Actions</h4></a>
</li>
<li class="nav-item" hidden>
    <a class="nav-link" data-toggle="tab" href="#Pesticide">Pesticide</a>
</li>

Javascript 這里：

function setActiveTab(tabNum) {
    var CD = document.getElementById('NI-ColonyData');
    var W = document.getElementById("NI-Weather");
    var A = document.getElementById("NI-Actions");

    if (tabNum == 1) {
        CD.className = "nav-link active nav-data-tab";
        W.className = "nav-link";
        A.className = "nav-link";

    }
    else if (tabNum == 2) {
        CD.className = "nav-link";
        W.className = "nav-link active nav-data-tab";
        A.className = "nav-link";
    }
    else if (tabNum == 3) {
        CD.className = "nav-link";
        W.className = "nav-link";
        A.className = "nav-link active nav-data-tab";
    }
}

Answer 1

感謝您的回復。 感謝 GrafiCode 顯示簡單的獨立代碼有效。 我相信這個問題與引導程序有沖突，所以我改變了我的方法來消除 js，只是添加了一些本地 css，當按下選項卡時，使用與引導程序中相同的選擇器進行選擇。