javascript - javascript重置中的选项卡

Question

抱歉，这可能是树木的愚蠢木材，但是:

我想要的只是一个带有几个链接的 div - 你点击链接然后切换到另一个 div。标准标签的东西。就是这样。但是当我运行下面的代码时，它会切换到我想要的 div 然后直接重置回原来的 div。为什么？

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  
}

CSS:

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

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>

等...

非常感谢。

Answer 1

那是因为浏览器实际上是在执行 href="" 指令，即在执行 javascript 后立即重新加载当前页面。您需要在 onclick 处理程序上返回 false 以防止浏览器依赖于 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;
}