如何用JavaScript循环切换div并保持其显示位置固定

你的问题核心在于元素隐藏方式和布局定位的问题：visibility:hidden只会隐藏元素但保留它在文档流中的空间，再加上所有.main_都在正常文档流里依次排列，所以切换时会出现错位。下面是具体修复步骤：

1. 修正HTML结构（PHP部分） #

首先你的循环里每个div都输出了一个Next按钮，这会导致页面出现多个按钮，应该把按钮移到循环外面。另外给所有.main_加一个统一的容器，用来做定位参考：

$content .= "<div class='card-container'>"; // 新增定位容器
foreach($headers as $header)
{
    // 注意：HTML中id必须唯一，建议改成动态id或去掉id
    $content .= "<div class='main_' id='card-{$header['id']}'>";
    $content .=  "</div>";
}
$content .= "</div>";
$content .= "<button class='next'>Next Order</button>"; // 按钮移到循环外
echo $content;

2. 调整CSS样式 #

给容器设置相对定位，让内部的div绝对定位在同一位置，同时改用display控制显示隐藏（不占空间）：

.card-container {
    position: relative;
    /* 设置容器宽高，和你的.main_保持一致 */
    width: 300px;
    height: 200px;
}

.main_ {
    display: none; /* 隐藏且不占布局空间 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 保留你的其他样式 */
}

.main_.active {
    display: block; /* 显示元素 */
}

3. 简化JavaScript代码 #

不用手动维护数组，直接用jQuery选择器管理所有div，配合active类完成切换：

$(document).ready(function(){
    const $cards = $('.main_');
    let currentIndex = 0;

    // 初始化显示第一个卡片
    $cards.eq(currentIndex).addClass('active');

    $('.next').click(function(){
        // 移除当前卡片的激活状态
        $cards.eq(currentIndex).removeClass('active');
        // 循环更新索引
        currentIndex = (currentIndex + 1) % $cards.length;
        // 激活新的卡片
        $cards.eq(currentIndex).addClass('active');
    });
});

关键逻辑说明 #

• position: absolute：让元素脱离正常文档流，相对于父容器.card-container定位，所有div会重叠在同一个位置。
• display: none：隐藏元素且不占据任何布局空间，比visibility:hidden更适合这种切换场景。
• 用CSS类控制显示状态，比直接操作元素style属性更易维护和扩展。

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