css3隐藏与显示互换

CSS3提供了一种隐藏与显示互换的方法，通过设置display的值来实现。

.show {
  display: block; /* 显示元素 */
}
.hide {
  display: none; /* 隐藏元素 */
} 

当元素需要隐藏时，可以添加类名“hide”；当元素需要显示时，可以添加类名“show”。如下所示：

/* 初始状态为隐藏 */
<div class="hide">这是一个需要隐藏的元素</div>

/* 点击按钮显示元素 */
<button onclick="document.querySelector('.hide').classList.toggle('show')">点击显示</button> 

使用JavaScript，可以通过按钮点击来切换元素的显示与隐藏状态。代码如下：

/* 初始状态为隐藏 */
<div class="hide">这是一个需要隐藏的元素</div>

/* 点击按钮 */
<button onclick="toggleElement()">点击显示/隐藏</button>

<script>
function toggleElement() {
  var element = document.querySelector('.hide');
  element.classList.toggle('show'); /* 切换显示/隐藏状态 */
}
</script> 

这种方式可以方便地实现元素的动态显示与隐藏，同时不需要修改元素的HTML结构，提高了代码的可维护性。