我想使用 onclick() 替换 div，使其看起来从默认的 div1 到 div2 再到 div3，然后再回到 div1，一遍又一遍。
我所做的一些东西工作得很好，但我一直试图让它返回到默认条件（条件）并将函数 show() 从开始到结束和结束到开始旋转。
这是我的代码，工作得很好，但没有从开始到结束和结束到开始执行函数 show()
<!DOCTYPE html>
<html>
<body>
<div style="margin-left:30%;margin-bottom:20%;">
<div id="div1" style="display:block">
<h2>one</h2>
</div>
<div id="div2" style="display:none">
<h2>two</h2>
</div>
<div id="div3" style="display:none">
<h2>three</h2>
</div>
<div id="div4" style="display:block">
<h2>one under</h2>
</div>
<div id="div5" style="display:none">
<h2>two under</h2>
</div>
<div id="div6" style="display:none">
<h2>three under</h2>
</div>
<button onclick=show()>click here</button>
</div>
</body>
<script>
function show() {
let div1 = document.querySelector('#div1');
let div2 = document.querySelector('#div2');
let div3 = document.querySelector('#div3');
let div4 = document.querySelector('#div4');
let div5 = document.querySelector('#div5');
let div6 = document.querySelector('#div6');
if (div1.style.display == "block" && div4.style.display == "block") {
div1.style.display = "none";
div2.style.display = "block";
div4.style.display = "none";
div5.style.display = "block";
} else {
div1.style.display = "block";
div2.style.display = "none";
div4.style.display = "block";
div5.style.display = "none";
}
if (div2.style.display == "block" && div5.style.display == "block") {
div2.style.display = "block";
div3.style.display = "none";
div5.style.display = "block";
div6.style.display = "none";
} else {
div2.style.display = "none";
div3.style.display = "block";
div5.style.display = "none";
div6.style.display = "block";
}
if (div3.style.display == "block" && div6.style.display == "block") {
div2.style.display = "none";
div1.style.display = "none";
div3.style.display = "block";
div5.style.display = "none";
div4.style.display = "none";
div6.style.display = "block";
}
}
</script>
</html>
这是使用纯 JS 和 document.querySelector 的非常古老的学校代码。
我对此代码的建议是使用 JQuery。