用按钮显示/隐藏div的javascript按钮（并且首先隐藏所有div） [英] Show/hide div's with javascript on a button press (and have all div's hidden first)

问题描述

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

I am new to javascript and I cant seam to hide the div's to start with, I can get the divs to switch between each other any help would be great

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

推荐答案

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

You can hide all the divs by adding inline styles:

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

这篇关于用按钮显示/隐藏div的javascript按钮（并且首先隐藏所有div）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！