多图层显示/隐藏

Question

<script language="JavaScript"> 
function setVisibility(id) { 
    if(document.getElementById('bt1').value=='Hide Layer'){ 
    document.getElementById('bt1').value = 'Show Layer'; 
    document.getElementById(id).style.display = 'none'; 
    } 
    else{ 
    document.getElementById('bt1').value = 'Hide Layer'; 
    document.getElementById(id).style.display = 'inline'; 
    } 
} 

<h4 id='bt1' style="cursor: hand;" value='Show Layer' onclick="setVisibility('sub1');" >menu1</h4> 
<span class="detail" id="sub1">menu1_contents</span> 

<h4 id='bt1' style="cursor: hand;" value='Show Layer' onclick="setVisibility('sub2');" >menu2</h4> 
<span class="detail" id="sub2">menu2_contents</span> 

<h4 id='bt1' style="cursor: hand;" value='Show Layer' onclick="setVisibility('sub3');" >menu3</h4> 
<span class="detail" id="sub1">menu3_contents</span> 

一按 - > 显示层第二点击 - >隐藏图层

这是没有问题的，而显示/隐藏同样的菜单。但是，当我点击“菜单2”，仍然保持“menu1_contents”的背景。当我点击下一个菜单时，结束了。

当点击“menu2”时，如何自动隐藏“menu1”的内容。

谢谢。

Answer 1

会做jQuery中：

function setVisibility(id) { 
    if($('#bt1').val()=='Hide Layer'){ 
    $('#bt1').val('Show Layer'); 
    $('#' + id).hide().removeClass("showing"); 
    } 
    else{ 
    $('#bt1').val('Hide Layer'); 
    $('.showing').removeClass("showing"); 
    $('#' + id).show().addClass("showing"); 
    $('span:not(.showing)').hide(); 
    } 
} 

哦，添加jQuery库，真正重要的

如果你真的想使用JavaScript，我已经有了这个想法被使用，如果隐藏每个其他跨度不是你现在显示的那个（小蹩脚）