web-dev-qa-db-ja.com

ボタンを押すとjavascriptでdivを表示/非表示にします（最初にすべてのdivを非表示にします）

私は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>
javascripthtmlhideshow
5
Obon

インラインスタイルを追加することで、すべての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/

7
Emilio Rodriguez
<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を<body>タグの下に、<script>と<style>を<head>タグの下に配置します。

ここに JSFindle Link

3
Hitesh Kumar

これを実現するには、CSSとJavaScriptの両方を使用します。 http://jsfiddle.net/maximglad​​kov/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>
1
Maksim Gladkov

純粋なCSSを使用して、最初にdivを非表示にすることができます。

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

あなたのコードは大丈夫です。 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">
    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>
0
kei