2016-05-10 7 views
0

を使用して別のdivを隠します「1つのdivが表示されているとき、もう1つのdivが非表示になっていますか?
私の悪い英語LANGのため申し訳ありません:#:3は私のhtmlコードは次のようになりdiv要素のjavascript

+2

はいできます。あなたはそれをどうやってできるか考えましたか? –

+0

idはjQueryでクラスを切り替えたり削除したりします。 –

+0

はい私は持っていますが、私はjsのnoobです。 – mrifat11

答えて

0

は、まず1特定のdivを は、それらのすべてを隠しコンテナとして私はそれを持ってここにdiv要素のそれぞれにクラスを追加し、表示さ

<div id="register" class="dropdown"> 
    <button id="regbutton" href="#" onclick="toggle_visibility('container1');">show1</button> 
    <div id="container1" class='container' style="display:none;">test 
    </div> 
</div> 
<div id="login" class="dropdown"> 
    <button id="loginbutton" href="#" onclick="toggle_visibility('container2')"><b>Masuk</b></button> 
    <div id="container2" class='container' style="display:none;">test 
    </div> 
</div> 


<script> 
    function toggle_visibility(id) { 
     var x = document.getElementById(id); 
     var divsToHide = document.getElementsByClassName('container'); //divsToHide is an array so we loop through them 
     for(var i = 0; i < divsToHide.length; i++){ 
      divsToHide[i].style.display = "none"; 
     } 
     x.style.display = 'block'; 
    } 
</script> 
+0

divは他のdivが表示されているときに非表示になりますが、同じボタンをクリックするとそのすべてを非表示にすることはできません。 – mrifat11

+0

ここには私が意味するもののjsfiddleがあります。https://jsfiddle.net/r9d4ckua/ – AceWebDesign

+0

別の方法これを行うには、 "隠された"クラスを使用して、必要な場所でそれを削除して追加することです。私はクラスをチェックするためのいくつかの関数を追加し、この例ではクラスを追加したり削除したりしました。これにより、代わりにボタンを切り替えることができますhttps://jsfiddle.net/ayf2uc26/1/ – AceWebDesign

0

だけこれら二つのdiv要素が必要な場合は、単に彼らのdivのidのと簡単な条件を使用することができます

function toggle(divNumber) { 
    var div1 = document.getElementById('div1'); 
    var div2 = document.getElementById('div2'); 
    if (divNumber == 1) { 
    div1.style.display = 'none'; 
    div2.style.display = 'block'; 
    } else { 
    div2.style.display = 'none'; 
    div1.style.display = 'block'; 
    } 
} 

フィドル: https://jsfiddle.net/8480twew/

関連する問題