Principiante de la barra de navegación aquí Como puede ver, todo funciona perfectamente hasta que hace clic en el espacio entre los enlaces que puede consultar aquí : mi codepen . cuando hago clic en la barra de navegación de enlaces, muestra perfectamente la clase activa, pero si hago clic entre el espacio, toda la barra de navegación pierde la clase.
var element = document.getElementsByClassName("flex-nav")[0]; element.addEventListener("click", myFunction); function myFunction(e) { var elems = document.querySelector(".active"); if(elems !==null) { elems.classList.remove("active"); } e.target.className = "active"; } .flex-nav { display: flex; flex-direction: column; margin-top: 54px; background: #333; width: 75px; height: 657px; justify-content: space-around; align-items: stretch; line-height: 23px; } .flex-nav a{ text-decoration: none; color: white; flex-wrap: wrap; text-align: center; margin: 5px; border: 1px solid transparent; } .flex-nav a.active { background: #9999ff; } .flex-nav a:hover:not(.active) { background: #555; border: 1px solid rgba(255, 51, 153,1); } <div class="flex-nav"> <a href="#" style="order:3">2k</a> <a href="#" style="order:2">4k</a> <a href="#" style="order:4">1080p</a> <a href="#" style="order:1">8k</a> </div>Puede evitar ese comportamiento dejando que los elementos flexibles crezcan para que no haya espacio entre ellos: Agregue esta configuración a .flex-nav a
flex-grow: 1; display: flex; justify-content: center; align-items: center;(El primero es para el crecimiento, los otros son para centrar el texto dentro de ellos)