Three clickable navigation elements, where only one should be active I have three clickable &lt;h1&gt; 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', '');
        }
&lt;div id='header'&gt; 
       &lt;h1 id='about' onclick="activeAbout()"&gt;&lt;a href="#" &gt;About&lt;/a&gt;&lt;/h1&gt;
       &lt;h1 id='poop' onclick="activePoop()"&gt;&lt;a href="#"&gt;Poop&lt;/a&gt;&lt;/h1&gt;
       &lt;h1 id='dgech' onclick="activeDgech()"&gt;&lt;a href="#"&gt;DGech&lt;/a&gt;&lt;/h1&gt;
&lt;/div&gt;




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;
        }
One way to trim down your code would be to make all three links trigger the same function. Inside of this function, you'll want to strip the class from each of the elements, and then assign the playing class to the element that was clicked on. This can be done by passing in the target element as a function parameter.

Also note that .attr() is a jQuery method; you're probably looking for the property className instead.

This can be seen in the following:



function active(target) {
  var elements = document.getElementsByTagName('h1');
  for (var i = 0; i &lt; elements.length; i++) {
    document.getElementsByTagName('h1')[i].className = "";
  }
  target.className = "playing";
}
&lt;div id='header'&gt;
  &lt;h1 id='about' onclick="active(about)"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/h1&gt;
  &lt;h1 id='poop' onclick="active(poop)"&gt;&lt;a href="#"&gt;Poop&lt;/a&gt;&lt;/h1&gt;
  &lt;h1 id='dgech' onclick="active(dgech)"&gt;&lt;a href="#"&gt;DGech&lt;/a&gt;&lt;/h1&gt;
&lt;/div&gt;




Hope this helps! :)