如何用onclick与JavaScript函数实现Div循环切换显示并回归初始状态

你的代码逻辑存在几个核心问题：多个if语句顺序执行，修改DOM状态后会立刻触发后续条件判断，导致逻辑冲突；第三个if块没有正确实现回归初始状态的逻辑；直接通过element.style.display判断显示状态也不够可靠（仅能获取内联样式）。

下面是修改后的完整代码，实现点击按钮依次切换div1/div4 → div2/div5 → div3/div6 → div1/div4的循环：

<!DOCTYPE html>
<html>
<body>
 <div style="margin-left:30%;margin-bottom:20%;">
    <div id="div1" class="top-group" style="display:block">
    <h2>one</h2>
</div>
<div id="div2" class="top-group" style="display:none">
    <h2>two</h2>
</div>
    <div id="div3" class="top-group" style="display:none">
    <h2>three</h2>
</div>

    <div id="div4" class="bottom-group" style="display:block">
    <h2>one under</h2>
</div>
<div id="div5" class="bottom-group" style="display:none">
    <h2>two under</h2>
</div>
    <div id="div6" class="bottom-group" style="display:none">
    <h2>three under</h2>
</div>

<button onclick="show()">click here</button>
</div>
</body>
<script>
// 维护当前显示的组索引，0对应第一组(div1/div4)，1对应第二组，2对应第三组
let currentIndex = 0;
// 获取所有顶部和底部的div组
const topGroups = document.querySelectorAll('.top-group');
const bottomGroups = document.querySelectorAll('.bottom-group');

function show() {
    // 先隐藏所有div
    topGroups.forEach(div => div.style.display = 'none');
    bottomGroups.forEach(div => div.style.display = 'none');
    
    // 计算下一个要显示的组索引，取模实现循环
    currentIndex = (currentIndex + 1) % 3;
    
    // 显示对应索引的组
    topGroups[currentIndex].style.display = 'block';
    bottomGroups[currentIndex].style.display = 'block';
}
</script>
</html>

关键优化点： #

• 状态变量跟踪：用currentIndex记录当前显示的组，避免复杂的DOM状态判断
• 分组管理：给对应组的div添加类名（top-group和bottom-group），方便批量获取和操作
• 循环逻辑：通过(currentIndex + 1) % 3实现索引的循环递增，当索引到2后，下一次会回到0
• 批量操作：用forEach一次性隐藏所有组，再显示目标组，逻辑更简洁直观

如果想保留原有的DOM结构（不添加类名），也可以通过ID规律来获取元素：

let currentIndex = 0;

function show() {
    // 隐藏所有6个div
    for(let i=1; i<=6; i++) {
        document.querySelector(`#div${i}`).style.display = 'none';
    }
    
    currentIndex = (currentIndex + 1) % 3;
    // 计算要显示的div编号：顶部是currentIndex+1，底部是currentIndex+4
    const topDivId = `div${currentIndex + 1}`;
    const bottomDivId = `div${currentIndex + 4}`;
    
    document.querySelector(topDivId).style.display = 'block';
    document.querySelector(bottomDivId).style.display = 'block';
}

内容的提问来源于stack exchange，提问作者brown chits