Three clickable navigation elements, where only one should be active
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! :)