Question

我是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>

Answer 1

您可以通过添加内联样式隐藏所有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/

Answer 2

<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放在＆lt; body＆gt;下标签和＆lt; script＆gt;和＆lt; style＆gt;在＆lt; head＆gt;下标签

这里是JSFindle Link

Answer 3

我会同时使用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>

Answer 4

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

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

Answer 5

你的代码很好。您只需将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>

Answer 6

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

Answer 7

全局声明show方法。看小提琴。我认为这就是你所需要的。

window.show= function(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";
}

JSFiddle

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

7 个答案: