用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))

考虑使用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真的很不错。

好吧，我们去：显示/隐藏按钮工作正常，但只对第一个结果，在其他结果，如果我点击按钮来显示/隐藏额外的信息，它显示/隐藏第一个结果信息 –

我相信与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的，如果它绝对不能帮助）

答

示例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

答

<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>`

这是我的

用jscript显示/隐藏div

相关推荐