title: tabs in javascript resetting
body: <p>Sorry this is probably stupid wood for trees stuff but:</p>
  
  <p>All I want is a <code>div</code> with a couple of links - you click on the links and you switch to another <code>div</code>. Standard tab stuff.  That's it. But when I run the code below, it switches to the <code>div</code> I want then resets straight back to the original div.  Why?</p>
  
  <p>the Javascript:</p>
  
  <pre><code>number_of_pages = 4;  
  function cyber(page)
  {  
      for(i = 1; i &lt;= number_of_pages; i++)  
      {  
          off = 'monitor' + i;  
          document.getElementById(off).style.display = 'none';  
      }  
      on = 'monitor' + page;  
      document.getElementById(on).style.display = 'block';  
  
      alert(on); //debug  
  }
  </code></pre>
  
  <p>the CSS:</p>
  
  <pre><code>.monitor{width: 400px; border: 1px solid #333; padding: 10px 10px 10px 10px}
  </code></pre>
  
  <p>the HTML:</p>
  
  <pre><code>&lt;div class="monitor" id="monitor1" style="display: block"&gt;  
  &lt;a href="" onclick="cyber(2)"&gt;foo&lt;/a&gt;&lt;br /&gt;  
  &lt;a href="" onclick="cyber(3)"&gt;bah&lt;/a&gt;&lt;br /&gt;  
  &lt;/div&gt;  
  
  &lt;div class="monitor" id="monitor2" style="display: none"&gt;
  &lt;a href="" onclick="cyber(1)"&gt;homepage&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>etc...</p>
  
  <p>Many thanks in advance.</p>