Question

我的页面上有4个隐藏的div，每个div都在页面顶部有一个“button div”，所以当我点击div1按钮时，隐藏的div1会显示。然后，当我点击div2按钮时，div1隐藏并显示div2。

我知道你可以这样做：

function showDiv() {
   document.getElementById('Div1').style.display = "block";
}

<div id="Div1"  style="display:none;">INFO</div>
<input type="button" name="div1" value="Show Div" onclick="showDiv()" />

但这只会使div显示，并在按下div2按钮时保持在那里。当按下不同的按钮时，如何让它们更换？

Answer 1

您可以通过指定.style.display =“none”

来隐藏其他div

function showDiv() {
   document.getElementById('Div1').style.display = "block";
   document.getElementById('Div2').style.display = "none";
   document.getElementById('Div3').style.display = "none";
   //etc...
}

Answer 2

您是否只需要使用Javascript？使用jQuery您可以将其更改为：

<div id="Div1" class="myDiv" style="display:none;">INFO</div>
<input type="button" class="divButton" name="div1" value="Show Div"/>

然后创建一个简单函数，类似于：

$('.divButton').on('click', function(event) {
    $('.myDiv').hide();
    var myDiv = $(event.currentTarget).closest('myDiv');
    myDiv.show();
});

Answer 3

将div的ID传递给按钮点击，并隐藏所有其他ID：

＆＃13;

function showDiv(id) {
  var d= document.querySelectorAll('div');
  [].forEach.call(d, function(div) {
    div.classList.add('hidden');
  });
  document.getElementById(id).classList.remove('hidden');
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<div id="Div1" class="hidden">Div 1</div>
<div id="Div2" class="hidden">Div 2</div>
<div id="Div3" class="hidden">Div 3</div>
<div id="Div4" class="hidden">Div 4</div>

<input type="button" value="Show Div 1" onclick="showDiv('Div1')" />
<input type="button" value="Show Div 2" onclick="showDiv('Div2')" />
<input type="button" value="Show Div 3" onclick="showDiv('Div3')" />
<input type="button" value="Show Div 4" onclick="showDiv('Div4')" />

＆＃13;

隐藏4个div;点击时单独换出

3 个答案: