javascript: función DOM que da resultados inesperados

Tengo problemas con una de mis barras de navegación. Quiero cambiar el color del botón cuando un usuario hace clic en él. Pero la función no parece funcionar. Aquí está el enlace a mi sitio web, donde se encuentra ese navegador: Mi sitio web

Aquí está el aspecto del menú de navegación:

// 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="" class="aactive" data-toggle="tab">{$L_COMPLEX_VIEW}</a>
  <a href="" data-toggle="tab">{$L_COMPLEX_SINGLE}</a>
</div>

------------------------------------

a no es la clase que estás usando en header.getElementsByClassName("a"), es el nombre de la etiqueta. Puedes usar querySelectorAll() para orientarlos desde el encabezado.

Además, te sugeriré lo siguiente:

Puedes usar querySelectorAll() en lugar de getElementsByClassName() para que puedas ignorar el índice.

Puedes usar classList.add() y classList.remove() para agregar y eliminar clases respectivamente.

Demostración:

// 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="" class="aactive" data-toggle="tab">COMPLEX VIEW</a>
  <a href=""  data-toggle="tab">COMPLEX SINGLE</a>                           
</div>

------------------------------------

Usar

var btns = header.getElementsByTagName("a");

Respondido

27 de marzo de 2021 a las 11:23

Nicolás I

Nicolás I

234

4

4 insignias de plata

15

15 insignias de bronce

0