Question

我是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()" />

我搜索了多个解决方案，他们只展示了如何启用，我不知道为什么，我无法禁用它们。

Answer 1

隐藏Div - 如果你想占据Div空间

function Hide()
{
document.getElementById('div1').style.visibility="hidden";
}

隐藏和删除Div元素的占用空间

    function Hide()
    {
    document.getElementById('div1').style.display="none";
    }

Answer 2

看看visibility options。简而言之，您应该调用getElementById（对于要修改的div的if），然后将找到的元素的样式的visibility属性更改为hidden（隐藏元素）或visible（显示）。

Answer 3

function showDiv1(){
    document.getElementById('div1').style.display = 'block';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'none';
}

Answer 4

这是show / hide的简单版本的 HTML：

<input type="button" name="Showdiv1" value="div1" /> <input type="button" name="Showdiv2" value="div2" /> <input type="button" name="Showdiv3" value="div3" /> <div id="div1">I'm div1</div> <div id="div2">I'm div2</div> <div id="div3">I'm div3</div>

<强> JQuery的：

$('input[type="button"]').on('click', function () { var div = "#" + $(this).val(); $('div').hide() $(div).show() })

JSFiddle

更新：由于您在纯js中提到过这里是方法

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

<强> JS：

function showDiv(that) { var len = document.getElementsByTagName('div').length; for (var i = 0; i < len; i++) { document.getElementsByTagName('div')[i].style.display = "none"; } var val = that.value; document.getElementById(val).style.display = "block"; }

JSFiddle

Answer 5

有几种方法可以做到这一点，减少重复代码的步骤将是这样的：

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

Fiddle

Answer 6

以下是纯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

使用JavaScript显示/隐藏DIV

6 个答案:

JSFiddle