Reine JavaScript: Toggle Links aktiv

Question

Mein Code funktioniert nur für die erste "a" Kind. Arbeitet nicht am Rest "ein" Kind. Warum?

Es gibt einige Lösungen im Internet, aber in jQuery. Ich bevorzuge reines JavaScript.

document.querySelector('a').addEventListener('click', active); 
 

 
function active() { 
 
    document.querySelector('a').classList.remove('active'); 
 
    this.classList.add('active'); 
 
}

.topnav { 
 
    overflow: hidden; 
 
    background-color: grey; 
 
} 
 

 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 10px; 
 
    text-decoration: none; 
 
} 
 

 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.topnav a.active { 
 
    background-color: red; 
 
    color: white; 
 
}

<div class="topnav"> 
 
    <a class="active" href="#home">Home</a> 
 
    <a href="#news">News</a> 
 
    <a href="#contact">Contact</a> 
 
    <a href="#about">About</a> 
 
</div>

Answer 1

Sie benötigen querySelectorAll und einige looping:

const menuItems = document.querySelectorAll('a'); 

menuItems.forEach(el => 
    el.addEventListener('click', active) 
); 

function active() { 
    menuItems.forEach(el => 
    el.classList.remove('active') 
); 
    this.classList.add('active'); 
} 

Answer 2

Sie document.querySelectorAll('a')

Answer 3

hinzufügen id statt Klasse verwenden sollte; Entferne die 'aktive' Klasse bei jedem Klick und füge dann 'aktive' Klasse dem angeklickten Anker-Tag hinzu;

document.getElementById('news').onclick = active; 
 
document.getElementById('home').onclick = active; 
 
document.getElementById('contact').onclick = active; 
 
document.getElementById('about').onclick = active; 
 

 
//addEventListener('click', active); 
 

 
function active() { 
 
    document.querySelector('a.active').classList.remove('active'); 
 
    this.classList.add('active'); 
 
}

.topnav { 
 
    overflow: hidden; 
 
    background-color: grey; 
 
} 
 

 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 10px; 
 
    text-decoration: none; 
 
} 
 

 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.topnav a.active { 
 
    background-color: red; 
 
    color: white; 
 
}

<div class="topnav"> 
 
    <a class="active" id="home" href="#home">Home</a> 
 
    <a href="#news" id="news">News</a> 
 
    <a href="#contact" id="contact">Contact</a> 
 
    <a href="#about" id="about">About</a> 
 
</div>

Answer 4

Sie Ereignis Delegation mit querySelectorAll verwenden können, wie unten kleine und saubere Lösung zu schreiben:

document.querySelector('.topnav').addEventListener('click', active); 
 

 
function active(e) { 
 
    document.querySelectorAll('.topnav > a').forEach(function(a){ 
 
     a.classList.remove('active'); 
 
    }) 
 
    e.target.classList.add('active'); 
 
}

.topnav { 
 
     overflow: hidden; 
 
     background-color: grey; 
 
    } 
 

 
    .topnav a { 
 
     float: left; 
 
     display: block; 
 
     color: #f2f2f2; 
 
     text-align: center; 
 
     padding: 10px; 
 
     text-decoration: none; 
 
    } 
 

 
    .topnav a:hover { 
 
     background-color: #ddd; 
 
     color: black; 
 
    } 
 

 
    .topnav a.active { 
 
     background-color: red; 
 
     color: white; 
 
    }

 
    <div class="topnav"> 
 
     <a class="active" href="#home">Home</a> 
 
     <a href="#news">News</a> 
 
     <a href="#contact">Contact</a> 
 
     <a href="#about">About</a> 
 
    </div>