title: Dynamically change class names in JavaScript
body: <p>I have a simple menu in HTML: </p>
  
  <pre><code>&lt;ul id="menu"&gt;
      &lt;li&gt;&lt;a id="admin" onclick="changeActive('admin');" class="active a red"&gt;Admin&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="dash" onclick="changeActive('dash');" class="a black"&gt;Dash&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="notifs" onclick="changeActive('notifs');" class="a black"&gt;Notifs&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The idea is to change the <strong>active</strong> element dynamically. </p>
  
  <p>My current function is:</p>
  
  <pre><code>function changeActive(id)
      {
        document.getElementById(id).className += "active a red";
        var c = document.querySelectorAll("ul a");
        for (i in c)
        {
          fav = c[i].attributes[0];
          if(fav.value!=id)
            {
              console.log(fav.value);
              document.getElementById(fav.value).className += "a black";
            }
        }
      }
  </code></pre>
  
  <p>Is there a more efficient solution to this? Thanks!</p>