如何用CSS实现点击按钮切换Div内容？布局异常求助

问题分析 #

你当前的问题有两个核心：

1. 用锚链接#comics只能实现页面定位，没法做到同一位置切换内容；
2. CSS中错误的定位继承（position: inherit）加上超出父容器的left值，导致布局彻底错乱——父容器#items_wrapper宽度只有700px，但子容器#navigator_container和#comics都设了left:720px，直接超出父容器范围，自然会跑到屏幕右侧。

解决方案 #

第一步：调整HTML结构 #

重新梳理结构，把导航按钮和内容区域分开管理，方便后续控制显示：

<!-- items -->
<div id="items_wrapper">
    <!-- 导航按钮容器 -->
    <div id="nav_buttons">
        <div class="nav_button" data-target="comics">
            <img src="images/comics_label.png" alt="comics button" width="120px">
        </div>
        <!-- 可扩展更多按钮 -->
        <div class="nav_button" data-target="movies">
            <img src="images/movies_label.png" alt="movies button" width="120px">
        </div>
    </div>

    <!-- 内容显示容器 -->
    <div id="content_container">
        <!-- section 1: comics -->
        <div id="comics" class="content_block active">
            这是漫画板块的内容
        </div>
        <!-- section 2: movies -->
        <div id="movies" class="content_block">
            这是电影板块的内容
        </div>
    </div>
</div>

第二步：修正CSS样式 #

去掉错误的定位继承，用Flex布局实现合理的页面排列：

/* 主容器 */
#items_wrapper{
    position: absolute;
    left: 300px;
    top: 50px;
    width: 700px;
    height: 700px;
    background-color: aliceblue;
    /* Flex布局让导航和内容垂直排列 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

/* 导航按钮容器 */
#nav_buttons{
    display: flex;
    gap: 15px; /* 按钮间的间距 */
    margin-bottom: 30px;
}

/* 导航按钮样式 */
.nav_button{
    cursor: pointer; /* 鼠标悬停显示手型 */
}

/* 内容块默认隐藏 */
.content_block{
    display: none;
    width: 600px;
    height: 550px;
    background-color: #fff;
    text-align: center;
    padding-top: 20px;
}

/* 激活的内容块显示 */
.content_block.active{
    display: block;
}

第三步：添加JavaScript实现内容切换 #

给按钮绑定点击事件，通过切换active类控制内容显示：

// 获取所有导航按钮和内容块
const navButtons = document.querySelectorAll('.nav_button');
const contentBlocks = document.querySelectorAll('.content_block');

// 给每个按钮绑定点击事件
navButtons.forEach(button => {
    button.addEventListener('click', () => {
        // 获取目标内容块的ID
        const targetId = button.dataset.target;
        
        // 隐藏所有内容块
        contentBlocks.forEach(block => {
            block.classList.remove('active');
        });
        
        // 显示目标内容块
        document.getElementById(targetId).classList.add('active');
    });
});

关键说明 #

1. 用data-target属性替代锚链接，关联按钮和对应内容块，逻辑更清晰；
2. Flex布局替代错误的绝对定位继承，确保所有元素都在主容器范围内；
3. 通过active类控制内容块的显示/隐藏，实现同一位置切换内容的效果；
4. 后续添加新的按钮和内容块时，只需保持data-target值与内容块ID一致即可。

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