在javascript中更改className时，HTML锚标记将停止工作

Question

我正试图拦截一个标记上的点击，以在选中CSS类时更改该类，然后我希望该过程继续到语句中指定的href。我创建了一个javascript函数，它可以更改感兴趣的三个链接的类，但由于某种原因，这些链接不会执行默认的跳转到href中指定的地址的操作。类值按预期更改。有人看到我做错了什么吗？

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展示了简单的独立代码。我认为这个问题与bootstrap有冲突，所以我改变了方法，删除了js，只添加了一些本地css，当按下选项卡时，这些css是使用与bootstrap中相同的选择器选择的。