tabs in javascript resetting

Question

Sorry this is probably stupid wood for trees stuff but:

All I want is a div with a couple of links - you click on the links and you switch to another div. Standard tab stuff. That's it. But when I run the code below, it switches to the div I want then resets straight back to the original div. Why?

the Javascript:

number_of_pages = 4;  
function cyber(page)
{  
    for(i = 1; i <= 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  
}

the CSS:

.monitor{width: 400px; border: 1px solid #333; padding: 10px 10px 10px 10px}

the HTML:

<div class="monitor" id="monitor1" style="display: block">  
<a href="" onclick="cyber(2)">foo</a><br />  
<a href="" onclick="cyber(3)">bah</a><br />  
</div>  

<div class="monitor" id="monitor2" style="display: none">
<a href="" onclick="cyber(1)">homepage</a>
</div>

etc...

Many thanks in advance.

Answer 1

That's because the browser is actually following the href="" directive, which is to reload the current page, immediately after it executes the javascript. You need to return false on the onclick handler to prevent browser from obligating to the href:

number_of_pages = 4;  
function cyber(page)
{  
    for(i = 1; i <= 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

    return false;
}