<div class="box">
    <div class="cambio"><a class="enlase" href="#">Inicio</a></div>
    <div class="cambio"><a class="enlase" href="#">Horario</a></div>
    <div class="cambio"><a class="enlase" href="#">Blog</a></div>

// css 
width: 60vw;
height: 30px;
background: gray;
display: flex;
justify-content: space-around;
    height: 100%;
    background: blue;
.cambio a{
    display: inline-block;
    width: 100px;
    height: 100%;
    color: white;
.active a{
    background: red;

// javascript

//metodo (1): se señala al elementi que dispara con la i del for
//            la clase active sirve como puente, sin nesecidad que este en el css

let cambio = document.querySelectorAll(".cambio");
for(let i = 0; i < cambio.length; i++) {
    cambio[i].addEventListener("click", () =>{
	cambio.forEach(link => {

// metodo(2): delegación de evento detecta al elemento que dispara
//            la clase active se incluye en el css 
//            se trabaja solo con enlase.

let enlase = document.querySelectorAll(".enlase");
enlase.forEach(lin => {
    lin.addEventListener("click", (e) => {
    enlase.forEach(link => { // es el enlase cuando  ya tiene el evento click
    });"active"); // detecta donde se iso click(elemento)

downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter