用jscript顯示/隱藏div

我查看了網站的所有環節，找不到我想要的答案。也許我的知識對於這一點太少了，但我試圖學習越來越多。用jscript顯示/隱藏div

這是事情，我有這個網站有幾部電影，並在我的數據庫中搜索後，我只返回與搜索參數對應的電影用戶的基本數據，我想要的其餘數據放入一個與選擇顯示和隱藏相同的股利。

這是我到目前爲止有：

<script type='text/javascript'> 
function showDiv() { 
    document.getElementById('hiddenDiv').style.display = "block"; 
} 
</script> 

<div id="hiddenDiv" style="display:none;" class="answer_list" > WELCOME</div> 
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

詳細信息：IM印刷一切與PHP的回聲。

非常感謝！

附加信息：

所有的結果都顯示在同一頁面，至極意味着所有的div具有相同的名稱。

我不得不改變我的div代碼：

echo "<div id='$dados[id]' style='display:none;' class='answer_list' >"; 

$dados[id] returns me the id of the data in my db. 

I want to change: 

document.getElementById('hiddenDiv') to something like document.getElementById('$dados[id') <-- Shows only the last div.

能不能做到？

結果來自：

while ($dados = mysql_fetch_array($query))

來源

2013-01-07 Henrique Souza

考慮使用jQuery的。 http://api.jquery.com/show/ 和 http://api.jquery.com/hide/ –

只實現jQuery來隱藏/顯示div就像是將F18帶到商店。 – MrCode

http://www.w3schools.com/css/css_display_visibility.asp – ethrbunny

試試這個：

<script type='text/javascript'> 
    function showDiv() { 
     if (document.getElementById('hiddenDiv').style.display == 'block') { 
      document.getElementById('hiddenDiv').style.display = 'none'; 
     } else { 
      document.getElementById('hiddenDiv').style.display = 'block'; 
     } 
    } 
</script> 
<div id="hiddenDiv" style="display:none;" class="answer_list" > 
    WELCOME 
</div> 
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

一個功能完成所有功能。這就是說，jQuery toggle真的很不錯。

來源

2013-01-07 17:43:35 SeanWM

好吧，我們去：顯示/隱藏按鈕工作正常，但只對第一個結果，在其他結果，如果我點擊按鈕來顯示/隱藏額外的信息，它顯示/隱藏第一個結果信息 –

我相信與JQuery會更容易，我會稍後嘗試Jirilmon喬治代碼來檢查它是否工作。 –

我想我找到了問題。由於所有結果都顯示在同一頁面中，所有div都具有相同的名稱（hiddenDiv）。我的數據庫中的每一組數據都有一個ID，我將用這個ID命名div，我怎樣才能用JScript ElementID做同樣的事情？ –

<script type='text/javascript'> 
function showDiv() { 
    document.getElementById('hiddenDiv').style.display = "block"; 
    document.getElementById('showDivButton').style.display = "none"; 
} 
function hideDiv() { 
    document.getElementById('hiddenDiv').style.display = "none"; 
    document.getElementById('showDivButton').style.display = "block"; 
} 
</script> 

<div id="hiddenDiv" style="display:none;" class="answer_list" > 
    WELCOME 
    <input type="button" id="hideDivButton" value="Hide Div" onclick="hideDiv()" /> 
</div> 
<input type="button" id="showDivButton" value="Show Div" onclick="showDiv()" />

，或者使用一個框架，比如Dojo（甚至jQuery的，如果它絕對不能幫助）

來源

2013-01-07 17:43:25

示例JavaScript + HTML：

<script language="javascript"> 
function toggle() { 
    var ele = document.getElementById("toggleText"); 
    var text = document.getElementById("displayText"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "show"; 
    } else { 
     ele.style.display = "block"; 
     text.innerHTML = "hide"; 
    } 
} 
</script> 

<a id="displayText" href="javascript:toggle();">show</a> <== click Here 
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

注： '切換' 一詞代表顯示/隱藏的元素。

而且這裏有一些很好的例子：

http://csscreator.com/node/708#xcomment-3123

http://psoug.org/snippet/Javascript-Smooth-Div-ShowHide_236.htm

來源

2013-01-07 17:54:34 OMG

<script type='text/javascript'> 
function showadve() { 
    if (document.getElementById('hiddenadve').style.display == 'none') { 
     document.getElementById('hiddenadve').style.display = 'block'; 
    } else { 
     document.getElementById('hiddenadve').style.display = 'none'; 
    } 
} 
</script> 
<div id="hiddenadve" class="answer_list" > 
    WELCOME 
</div> 
<input type="button" name="answer" value="Show Div" onclick="showadve()" /> 
<a href="#" onclick="showadve()">all close</a>`

這是我的

來源

2013-11-20 04:29:52 shota

用jscript顯示/隱藏div

回答

相關問題