I have three clickable <h1>
elements in the nav bar of a static page I'm making as a practice project. I wrote code so when I click one, it lights up.
Since the page is static, it doesn't actually load another page, so it's just the button lighting up. When I click a different button, I want it to light up, and the previous one to turn off. I do this by adding and removing a class that alters the CSS of the element, however, I can't figure out a way of doing this more concisely than what I've already written, which adds the new class and removes any class for the other two elements. Surely there must be a more efficient way of doing this. I thought about a switch
statement but I'm not quite sure how to use those yet.
function activeAbout(){
var about = document.getElementById('about');
about.setAttribute('class', 'playing');
document.getElementById('poop').setAttribute('class', '');
document.getElementById('dgech').setAttribute('class', '');
}
function activePoop(){
var poop = document.getElementById('poop');
poop.setAttribute('class', 'playing');
document.getElementById('about').setAttribute('class', '');
document.getElementById('dgech').setAttribute('class', '');
}
function activeDgech(){
var dgech = document.getElementById('dgech');
dgech.setAttribute('class', 'playing');
document.getElementById('about').setAttribute('class', '');
document.getElementById('poop').setAttribute('class', '');
}
<div id='header'>
<h1 id='about' onclick="activeAbout()"><a href="#" >About</a></h1>
<h1 id='poop' onclick="activePoop()"><a href="#">Poop</a></h1>
<h1 id='dgech' onclick="activeDgech()"><a href="#">DGech</a></h1>
</div>
How can I refactor this more efficiently?
Edit: Added CSS code.
#about{
grid-column: 1;
grid-row: ;
justify-self: end;
align-self: ;
color: white;
font-size: 60px;
margin-top: 10px;
}
#poop{
grid-column: 2;
justify-self: center;
color: white;
font-size: 60px;
margin-top: 10px;
}
#dgech{
grid-column: 3;
color: white;
font-size: 60px;
margin-top: 10px;
}
.playing{
border-color: #ffc600;
text-shadow: 0 0 0.5rem #ffc600;
}