javascript多個div的切換可見性

我有3 Divs彼此之上和3個鏈接切換其知名度。
默認情況下所有div被設置爲display:none和下面的sript適用於每個相應的div但需要切換對方的狀態，例如：
鏈接1 =？顯示Div1構成（或反之亦然）當我點擊鏈接我需要顯示Div2的和隱藏Div1構成，DIV3。如果我點擊鏈接3 =顯示DIV3和隱藏Div1構成，Div2的如果它們是可見的，等等...換句話說，顯示1個格在同一時間。javascript多個div的切換可見性

我該怎麼辦？這是我到目前爲止。

鏈接

<a href="#" onclick="toggle_visibility('Soft');"></a> 
<a href="#" onclick="toggle_visibility('Broch');"></a> 
<a href="#" onclick="toggle_visibility('tut');"></a>

的DIV

<div id="Soft" style="display: none;">.....</div> 
<div id="broch" style="display: none;">.....</div> 
<div id="tut" style="display: none;">.....</div>

的Javascript

function toggle_visibility(Soft) { 
var soft = document.getElementById(Soft); 
if(soft.style.display == 'block') 
    soft.style.display = 'none'; 
    else 
     soft.style.display = 'block';  
} 

function toggle_visibility(Broch) { 
    var e = document.getElementById(Broch); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 

} 

function toggle_visibility(tut) { 
    var e = document.getElementById(tut); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 

}

來源

2013-11-21 Awena

這是很容易使用jQuery ......是您使用它？ –

您可能希望將狀態存儲在變量中。試試這個：

var divs = ["Soft", "broch", "tut"]; 
var visibleDivId = null; 

function toggleVisibility(divId) { 
    if(visibleDivId === divId) { 
    visibleDivId = null; 
    } else { 
    visibleDivId = divId; 
    } 

    hideNonVisibleDivs(); 
} 

function hideNonVisibleDivs() { 
    var i, divId, div; 

    for(i = 0; i < divs.length; i++) { 
    divId = divs[i]; 
    div = document.getElementById(divId); 

    if(visibleDivId === divId) { 
     div.style.display = "block"; 
    } else { 
     div.style.display = "none"; 
    } 
    } 
}

工作例如：http://jsbin.com/Ipezadu/1/

來源

2013-11-21 18:14:36

太棒了！感謝Renato！ – Awena

這是與jQuery非常容易。 JSFiddle

<a href="#" data-div="div1">Toggle DIV 1</a> 
<a href="#" data-div="div2">Toggle DIV 2</a> 
<a href="#" data-div="div3">Toggle DIV 3</a> 

<div id="div1">DIV 1</div> 
<div id="div2" style="display: none">DIV 2</div> 
<div id="div3">DIV 3</div> 

$('a').on('click', function() { 
    $('div[id="' + $(this).data('div') + '"]').toggle(); 
});

來源

2013-11-21 18:10:01 ArrayKnight

這應該是一個評論，而不是一個答案。堅持標籤。 – plalx

javascript多個div的切換可見性

回答

相關問題