title: div background color change back and forth with only one highlighted div at a time
body: <p>Hi I have a horizontal nav bar that when each section is clicked the background color toggles back and forth. However I would like it so that only one section is 'active'. In other words only one section at a time can have a different background color.</p>
  
  <pre><code>&lt;ul class="nav"&gt;
      &lt;li&gt;&lt;a href="javascript:Tog('1')" onclick="changeColor(this)"&gt;Search&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="javascript:Tog('2')" onclick="changeColor(this)"&gt;Legend&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="javascript:Tog('3')" onclick="changeColor(this)"&gt;Info&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;"
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>function changeColor(e) {
  var c = e.className;
  e.className = (c == 'color1') ? 'nav'  : 'color1'; 
  }
  </code></pre>
  
  <p>Thank you for any help</p>