onclick 显示 div 并隐藏其他 div - Html

在Web开发中，经常需要动态显示或隐藏一个div元素。本文将介绍如何通过onclick事件来实现显示某个div元素并隐藏其他div元素。

实现方法

我们先创建三个简单的div元素，其中一个有默认显示效果，另外两个默认隐藏。

<div id="div1">这是第一个div元素，在页面加载时默认显示。</div>
<div id="div2" style="display:none;">这是第二个div元素，在页面加载时默认隐藏。</div>
<div id="div3" style="display:none;">这是第三个div元素，在页面加载时默认隐藏。</div>

为了实现点击后可以显示一个div元素并隐藏其他div元素，我们需要给每个div元素一个不同的id，并添加相应的JavaScript函数来控制显示和隐藏。

<div id="div1">这是第一个div元素，在页面加载时默认显示。</div>
<div id="div2" style="display:none;">这是第二个div元素，在页面加载时默认隐藏。</div>
<div id="div3" style="display:none;">这是第三个div元素，在页面加载时默认隐藏。</div>

<button onclick="showDiv('div1')">显示第一个div元素</button>
<button onclick="showDiv('div2')">显示第二个div元素</button>
<button onclick="showDiv('div3')">显示第三个div元素</button>

<script>
function showDiv(divName) {
  var divs = document.getElementsByTagName('div');
  for(var i=0;i<divs.length;i++) {
    if(divs[i].id == divName) {
      divs[i].style.display = "block";
    } else {
      divs[i].style.display = "none";
    }
  }
}
</script>

上述代码中的JavaScript函数通过循环遍历所有的div元素，并根据传入的参数来判断是显示还是隐藏。如果div元素的id与传入的参数相同，则将其显示出来；否则将其隐藏起来。

这样，当用户点击按钮时，就会触发JavaScript函数来控制div元素的显示和隐藏了。

总结

本文介绍了如何使用onclick事件来实现动态显示和隐藏div元素。通过添加适当的JavaScript函数，我们可以轻松地切换不同的div元素，从而实现更多的Web交互效果。