title: Changing CSS class with Javascript
body: <p>Is there a better way than the implementation I have now? I'm concerned that the way I've done it is a little hackish and am wondering if there's a more elegant solution.</p>
  
  <p>I want to change the "selected" element on the page by applying a CSS class to it, and remove the one that is currently selected. The code I have for changing the element's class:</p>
  
  <pre><code>function changeClass(element) {
      document.getElementById("nav").getElementsByClassName("selected")[0].className = "";
      element.className = "selected";
  }
  </code></pre>
  
  <p>And the corresponding elements:</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" onclick="changeClass(this)" class="selected"&gt;Main&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="changeClass(this)"&gt;Downloads&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="changeClass(this)"&gt;News&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="changeClass(this)"&gt;Forums&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="changeClass(this)"&gt;Proposals&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Again, this seems a little hacky. Is there a better way of accomplishing what I'm trying to do?</p>