在按下按钮时使用 javascript 显示/隐藏 div（并首先隐藏所有 div）答案

【问题标题】：Show/hide div's with javascript on a button press (and have all div's hidden first)在按下按钮时使用 javascript 显示/隐藏 div（并首先隐藏所有 div）
【发布时间】：2014-03-10 22:43:16
【问题描述】：

我是 javascript 新手，我一开始无法隐藏 div，我可以让 div 在彼此之间切换任何帮助都会很棒

<script type="text/javascript">
function show(elementId) { 
 document.getElementById("id1").style.display="none";
 document.getElementById("id2").style.display="none";
 document.getElementById("id3").style.display="none";
 document.getElementById(elementId).style.display="block";
}
</script>


<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>

【问题讨论】：

为什么不使用 jQuery？
@Nathan：为什么不用Javascript？
jQuery 做这种事情会更好。
这种简单功能的所有开销？基于此信息，对 jQuery 来说将是愚蠢的。 :)

标签： javascript html hide show

【解决方案1】：

您可以使用纯 CSS 来隐藏开头的 div：

#id1, #id2 #id3 {
 display: none;
}

【讨论】：

点击后元素不显示，不是初始显示问题
在这种情况下，问题需要更新。

【解决方案2】：

<script type="text/javascript">
function hideAll(){
     document.getElementById("id1").style.display="none";
     document.getElementById("id2").style.display="none";
     document.getElementById("id3").style.display="none";    
}
function show(elementId) { 
    hideAll();
    document.getElementById(elementId).style.display="block";
}
</script>


<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>

<script type="text/javascript">
    hideAll();
</script>

jsfiddle：http://jsfiddle.net/y7YKV/

【讨论】：

Topicstarter 说：“我无法缝合以隐藏 div 的开头”。所以这就是为什么。

【解决方案3】：

您可以通过添加内联样式来隐藏所有 div：

<script type="text/javascript">
function show(elementId) { 
 document.getElementById("id1").style.display="none";
 document.getElementById("id2").style.display="none";
 document.getElementById("id3").style.display="none";
 document.getElementById(elementId).style.display="block";
}
</script>


<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1"  style="display:none">text 1</div>
<div id="id2"  style="display:none">text 2</div>
<div id="id3"  style="display:none">text 3</div>

在这里查看它的工作原理：http://jsbin.com/suhok/2/

【讨论】：

工作得非常好！谢谢！

【解决方案4】：

您的代码没问题。您只需将script 块放在其他所有内容之后。

DEMO

<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>
<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>
<script type="text/javascript">
    function show(elementId) {
        document.getElementById("id1").style.display = "none";
        document.getElementById("id2").style.display = "none";
        document.getElementById("id3").style.display = "none";
        document.getElementById(elementId).style.display = "block";
    }
</script>

【讨论】：

【解决方案5】：

<script type="text/javascript">
function show(elementId) { 
 document.getElementById("id1").style.display="none";
 document.getElementById("id2").style.display="none";
 document.getElementById("id3").style.display="none";
 document.getElementById(elementId).style.display="block";
}
</script>
<style>
 div{
  display:none;
 }
</style>

<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>

所有的 div 都会在第一时间被隐藏，你的代码会这样工作，将按钮和 div 放在

标签下，将

【讨论】：

【解决方案6】：

我会同时使用 CSS 和 JavaScript 来完成此操作：http://jsfiddle.net/maximgladkov/XaMzB/1/

JavaScript

window.show = function(elementId) { 
    var elements = document.getElementsByTagName("div");
    for (var i = 0; i < elements.length; i++)
        elements[i].className = "hidden";

    document.getElementById(elementId).className = "";
}

CSS

.hidden {
    display: none;
}

HTML

<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1">text 1</div>
<div id="id2" class="hidden">text 2</div>
<div id="id3" class="hidden">text 3</div>

【讨论】：