多圖層顯示/隱藏

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，我已經有了這個想法被使用，如果隱藏每個其他跨度不是你現在顯示的那個（小蹩腳）