title: Use JavaScript to change the class of an <li>
body: <p>I have the following code:</p>
  
  <pre><code>&lt;div id="nav"&gt;
    &lt;ul&gt;
      &lt;li id="tabOne" class="first current"&gt;&lt;a href="./CS1.html" target="SheetView"&gt;Page One&lt;/a&gt;&lt;/li&gt;
      &lt;li id="tabTwo"&gt;&lt;a href="./CS2.html" target="SheetView"&gt;Page Two&lt;/a&gt;&lt;/li&gt;
      &lt;li id="tabThree"&gt;&lt;a href="./CS3.html" target="SheetView"&gt;Page Three&lt;/li&gt;
      &lt;li id="tabFour"&gt;&lt;a href="./CS4.html" target="SheetView"&gt;Page Four&lt;/a&gt;&lt;/li&gt;
      &lt;li id="tabFive"&gt;&lt;a href="./CS5.html" target="SheetView"&gt;Page Five&lt;/a&gt;&lt;/li&gt;
      &lt;li id="tabSix"&gt;&lt;a href="./CS6.html" target="SheetView"&gt;Page Six&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>This loads the selected page into an iframe named "SheetView." What I need to do is use JavaScript to alter the class when an option that isn't the currently selected on is clicked. I should say that I have the current class already setup in my CSS. I just have no way to trigger it.</p>
  
  <p>I thought adding an onlick event to the <code>&lt;UL&gt;</code> up there and calling <code>onclick="Javascript:changeCurrent();"</code> but there is the problem (four actually):</p>
  
  <ol>
  <li>Is <code>&lt;ul onclick="JavaScript:changeCurrent();&gt;</code> where I need to have the event?</li>
  <li>What is the resulting JavaScript to make the change happen?</li>
  <li>How can I cause the first option to be set as current by default?</li>
  <li>Is there a way to keep the currently selected option from being an active link?</li>
  </ol>
  
  <p>I found a few different examples but I couldn't tailor them to work for me. Any help would be most appreciated.</p>