javascript - DOM 函数给出了意想不到的结果

Question

我的一个导航栏有问题。我想在用户单击它时更改按钮的颜色。但是该功能似乎不起作用。这是指向我的网站的链接，该导航位于：我的网站

这是导航菜单的外观：

// Add active class to the current button (highlight it)

var header = document.getElementById("navbar-complex");
var btns = header.getElementsByClassName("a");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("aactive");
    current[0].className = current[0].className.replace(" aactive", "");
    this.className += " aactive";
  });
}

.aactive,
.a:hover {
  background-color: #666;
  color: white;
}

<div id="navbar-complex" class="scrollmenu tab-content nav nav-tabs">
  <a href="#complex_view" class="aactive" data-toggle="tab">{$L_COMPLEX_VIEW}</a>
  <a href="#complex_single" data-toggle="tab">{$L_COMPLEX_SINGLE}</a>
</div>

标签： javascripthtmlcss

Answer 1

a不是您在 中使用的类header.getElementsByClassName("a")，它是标签名称。您可以使用querySelectorAll()从标头定位它们。

另外，我会建议你以下几点：

1. 您可以使用querySelectorAll()代替，getElementsByClassName()以便您可以忽略索引。

2. 您可以使用classList.add()和分别classList.remove()添加和删除类。

演示：

// Add active class to the current button (highlight it)
var header = document.getElementById("navbar-complex");
var btns = header.querySelectorAll("a");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.querySelector(".aactive"); //you can use querySelector to target the element with class aactive
    current.classList.remove("aactive"); //now you do not need to use the index 
    this.classList.add("aactive");
  });
}

.aactive, .a:hover {
  background-color: #666;
  color: white;
}

<div id="navbar-complex" class="scrollmenu tab-content nav nav-tabs">
  <a href="#complex_view" class="aactive" data-toggle="tab">COMPLEX VIEW</a>
  <a href="#complex_single"  data-toggle="tab">COMPLEX SINGLE</a>                           
</div>