使用JavaScript顯示隱藏的分區

我有一個分類 divs（其中有5個）。在我的CSS中，我已將該類設置爲display:none;。每個div也有獨特的ID。我想用JS來讓這些div單獨出現。使用JavaScript顯示隱藏的分區

是這樣的：

<style> 
.hidden{ 
    display:none; } 
</style> 
<script> 
function displayDiv1(){ 
    document.getElementById('div1').style.display = "block"; } 
function displayDiv2(){ 
    document.getElementById('div2').style.display = "block"; } 
</script> 
<div class="hidden" id="div1"> 
<p>some stuff here</p> 
</div> 
<div class="hidden" id="div2"> 
<p>some more stuff here</p> 
</div>

這裏有一個jfiddle（不工作）http://jsfiddle.net/DAzZT/

是否有可能做這樣的事情還是我必須使用反對id作爲單獨申報每個divdisplay:none;到class？

來源

2012-11-06 Occam' s Razor

的問題是隻有getElementById，你需要編寫document.getElementById。並只有一個功能，做同樣的工作：

function showDiv(id) { 
    document.getElementById(id).style.display = "block"; 
    return false; 
}

叫它：

一切就是在你的代碼有一個錯誤的

<a href="#" onclick="return showDiv('your_div_id');">Show Div</a>

來源

2012-11-06 07:37:35

好點，這會節省我一些時間/空間。我只是想確保這可以在所有的瀏覽器上運行，這是典型的行爲，或者某些瀏覽器會對如何聲明display來挑剔？ –

據我所知，所有borwser支持'display'風格（不包括lynx）。 –

其實問題在於他將函數封裝到另一個函數中，使得他的'displayX'函數在全局範圍內無法訪問。你可以在我的答案中找到關於這個問題的更多細節。 http://stackoverflow.com/a/13246583/1375293 – clentfort

您只需將您的功能放在正確的範圍內，就像您在問題中所做的一樣，然後使用document.getElementById。更改左側的onLoad選項沒有包裝（體）

來源

2012-11-06 07:32:34

試試這個fiddle

你應該使用文檔對象

function display1(){ 
document.getElementById('div1').style.display = "block"; 
} 
function display2(){ 
document.getElementById('div2').style.display = "block"; 
}

來源

2012-11-06 07:34:13

啊哈getElementById！我匆匆做了那種事。感謝您指出了這一點。 –

您可以使用jQuery爲調用它。像你說的，你設置顯示：沒有在你的CSS和之後，使用jQuery你有$（'＃element'）。show（）; - 顯示或$（'＃element'）。hide（）隱藏。

來源

2012-11-06 07:34:03 Jacobson

這裏有一個簡單的解決方案：

<script> 
    function display(num){ 
     document.getElementById('div'+num).style.display = "block"; 
     return false; 
    } 
</script> 
<a href="#" onclick="return display(1);">Open Div 1</a><br /> 
<a href="#" onclick="return display(2);">Open Div 2</a>

Demonstration（我刪除了你的position:absolute讓雙方的div可見）

來源

2012-11-06 07:35:31

首先，它是document.getElementById不getElementById。

你也在你的小提琴中犯了一個錯誤。您選擇將您的代碼包裝到onLoad函數中。這會導致您的實際JavaScript看起來像這樣。

window.addEvent('load', function() { 
    function display1(){ 
     document.getElementById('div1').style.display = "block"; 
    } 
    function display2(){ 
     document.getElementById('div2').style.display = "block"; 
    } 
});

你的函數定義是內的功能，他們不是在全球範圍內訪問。因此，如果您現在點擊您的某個鏈接，則結果爲Uncaught ReferenceError。

要解決這個問題，你可以設置爲不換你的代碼的函數（左側下選擇框架中的第一個下拉菜單中選擇no wrap (head)或no wrap (body)。

或者更好的嘗試是將功能添加到全球window對象，請保留onLoad打包並修改您的代碼。

window.display1 = function(){ 
    document.getElementById('div1').style.display = "block"; 
} 
window.display2 = funnction(){ 
    document.getElementById('div2').style.display = "block"; 
}

來源

2012-11-06 07:48:19 clentfort

感謝您的明確解釋，我沒有知道這一點。我是一個小老虎。 –

嘗試document.getElementById而不是在JavaScript函數

來源

2012-11-06 07:48:36

使用JavaScript顯示隱藏的分區

回答

相關問題