用jscript显示/隐藏div

时间:2013-01-07 17:37:55

标签: php javascript html show-hide

我看了整个网站,我找不到我想要的答案。也许我的知识太少,但我试图学习越来越多。

这是事情,我有这个网站有几部电影,在我的数据库中搜索后,我只返回用户的基本数据,其中包含与搜索参数对应的电影,我想要的其余数据放入一个div,可以选择显示和隐藏相同的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()" />

细节:我用php echo打印所有内容。

非常感谢!

其他信息:

所有结果都显示在同一页面中,这意味着所有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))

4 个答案:

答案 0 :(得分:1)

试试这个:

<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非常好。

答案 1 :(得分:0)

<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,如果它绝对无法帮助的话)

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

这是我的