第一种直接在div标签上标明style
<div class="changeX">a元素</div>
<div class="changeY" style="display: none;">b元素</div>
<input type="button" value="切换显示a元素" onclick="gr('.changeX','.changeY');" />
<button onclick="gr('.changeY','.changeX');">切换显示b元素</button>
<script type="text/javascript">
function gr(s1, s2) {
document.querySelector(s1).style.display = "";
document.querySelector(s2).style.display = "none";
}
</script>
可以实现点击按钮使各内容表示
第二种将代码分离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试代码</title>
<style type="text/css">
.changeY{
display: none;
}
</style>
</head>
<body>
<div class="changeX">a元素</div>
<div class="changeY">b元素</div>
<input type="button" value="切换显示a元素" onclick="gr('.changeX','.changeY');" />
<button onclick="gr('.changeY','.changeX');">切换显示b元素</button>
<script type="text/javascript">
function gr(s1, s2) {
document.querySelector(s1).style.display = "";
document.querySelector(s2).style.display = "none";
}
</script>
</body>
</html>
只能实现点击第二个按钮将盒子内容隐藏而不能显示盒子内容
