0

私は HTML と JavaScript の初心者で、3 つの DIV を持っているので少し問題があります。

<div id="div1"> I'm div1 </div>
<div id="div2"> I'm div2 </div>
<div id="div3"> I'm div3 </div>

3つのボタンがあり、それぞれが対応するDIVを有効にし、他のボタンを無効にして一度に1つのDIVのみを表示します

<input type="button" name="Showdiv1" value="Show Div 1" onclick="showDiv1()" />
<input type="button" name="Showdiv2" value="Show Div 2" onclick="showDiv2()" />
<input type="button" name="Showdiv3" value="Show Div 3" onclick="showDiv3()" />

複数のソリューションを検索しましたが、有効にする方法しか表示されていません。理由がわかりません。無効にすることはできません。

4

6 に答える 6

0

純粋なjsを使用した簡単なソリューションを次に示します。

<div id=div1> I'm div1 </div>
<div id=div2> I'm div2 </div>
<div id=div3> I'm div3 </div>


<input type="button" name="Showdiv1" value="Show Div 1" onclick="showDiv('div1')" />
<input type="button" name="Showdiv2" value="Show Div 2" onclick="showDiv('div2')" />
<input type="button" name="Showdiv3" value="Show Div 3" onclick="showDiv('div3')" />

<script>
function showDiv(id) {
  var divs = document.querySelectorAll("div");

  for (var i = 0; i < divs.length; i++) {
      divs[i].style.display = "none";
  }
  var divToShow = document.getElementById(id);
  divToShow.style.display = "block";
}
</script>

JSFiddle

于 2013-11-05T13:51:05.300 に答える
0

これを行うにはいくつかの方法があります。コードの繰り返しを減らす手順は次のようになります。

<div id=div1> I'm div1 </div>
<div id=div2> I'm div2 </div>
<div id=div3> I'm div3 </div>
<input type="button" name="Showdiv1" value="Show Div 1" onclick="showDiv('1')" />
<input type="button" name="Showdiv2" value="Show Div 2" onclick="showDiv('2')" />
<input type="button" name="Showdiv3" value="Show Div 3" onclick="showDiv('3')" />

JS:

function showDiv(num) {
    document.getElementById('div1').style.display='none';
    document.getElementById('div2').style.display='none';
    document.getElementById('div3').style.display='none';
    document.getElementById('div'+num).style.display='block'
}

フィドル

于 2013-11-05T13:43:58.097 に答える
0 
function showDiv1(){
    document.getElementById('div1').style.display = 'block';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'none';
}
于 2013-11-05T13:37:31.223 に答える