title: Changing a <div> class with JavaScript
body: <p>I am trying to change the class of certain  tags with an onclick() event. The basic premise is to have the background image of each  tag change when the user clicks on them, sort of stimulating a "menu selection".</p>
  
  <p>Here is the code I have:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  .navCSS0
  {
      background-image:url('news_selected.png');
      width:222px;
      height:38px;
  }
  
  .navCSS1
  {
      width:222px;
      height:38px;
  }
  
  .container_news
  {
      background-image:url('itsupdates.png');
      height:330px;
      width:965px;
  }
  
  .container_left
  {
      margin-top:90px;
      margin-left:20px;
      float:left;
      height:auto;
      width:auto;
  }
  
  &lt;/style&gt;
  &lt;/header&gt;
  
  &lt;script&gt;
  //global arrays to store nav positions, menu options, and the info text
  var navid_array = new Array();
  navid_array[0] = 'nav1';
  navid_array[1] = 'nav2';
  navid_array[2] = 'nav3';
  navid_array[3] = 'nav4';
  navid_array[4] = 'nav5';
  
  
  //Takes the navid selected, and goes into a loop where the background of the selected menu item is changed to a image
  //with rounded corners, while the backgrounds of the other menu items are changed back to light grey or stay the same.
  //There is also a call to the change_info() function when the selected menu item has been located.
  function nav_color_swap(navid)
    {
      for(var i = 0; i &lt; navid_array.length; i++) {
            if(navid == navid_array[i]) 
              {
                  document.getElementById(navid).className = "navCSS0";
              }
            else 
              {
                  document.getElementById(navid).className = "navCSS1";
              } 
          }
    }
  
  &lt;/script&gt;
  
  &lt;body&gt;
  &lt;div class="container_news"&gt;
  &lt;div class="container_left"&gt;
      &lt;div class="navCSS1" id="nav1" onclick="nav_color_swap(this.id)"&gt;&lt;a href="#" onclick="nav_color_swap(this.id)"&gt;Blah 1&lt;/a&gt;&lt;/div&gt;
      &lt;div class="navCSS1" id="nav2" onclick="nav_color_swap(this.id)"&gt;&lt;a href="#" onclick="nav_color_swap(this.id)"&gt;Blah 2&lt;/a&gt;&lt;/div&gt;
      &lt;div class="navCSS0" id="nav3" onclick="nav_color_swap(this.id)"&gt;&lt;a href="#" onclick="nav_color_swap(this.id)"&gt;Blah 3&lt;/a&gt;&lt;/div&gt;
      &lt;div class="navCSS1" id="nav4" onclick="nav_color_swap(this.id)"&gt;&lt;a href="#" onclick="nav_color_swap(this.id)"&gt;Blah 4&lt;/a&gt;&lt;/div&gt;
      &lt;div class="navCSS1" id="nav5" onclick="nav_color_swap(this.id)"&gt;&lt;a href="#" onclick="nav_color_swap(this.id)"&gt;Blah 5&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is, when I run this code, nothing happens... the only one that actually changes is the last menu item ("Blah 5")... any thoughts?</p>