如何通过点击菜单切换指定div的内容？附相关CSS代码

嘿，我看你已经搭好了基础的CSS结构，接下来咱们一步步实现点击菜单切换div内容的功能，分三个部分来搞定：

1. 完善HTML结构 #

首先需要把菜单和要切换的内容容器对应起来，用data-target属性关联菜单选项和对应的内容块，这样逻辑更清晰：

<div id="global">
  <div id="cadre1">
    <ul id="menu">
      <li><a href="#" data-target="content1">内容1</a></li>
      <li><a href="#" data-target="content2">内容2</a></li>
      <li><a href="#" data-target="content3">内容3</a></li>
    </ul>
  </div>
  <div id="cadre2">
    <div id="content1" class="active">这是默认显示的内容1</div>
    <div id="content2">这是点击菜单后显示的内容2</div>
    <div id="content3">这是点击菜单后显示的内容3</div>
  </div>
</div>

2. 补全并优化你的CSS #

我帮你补全了菜单的背景色，还添加了内容切换的隐藏/显示样式，同时处理了浮动的清除问题：

body { background-color: #555657; margin: 20px; }
/* CADRE PARENT */
#global { overflow: hidden; /* 清除左侧浮动带来的高度塌陷问题 */ }
/* CADRE 1 */
#cadre1 { float: left; width: 250px; }
#cadre1 span { color: #33A7FF; }
/* CADRE 2 */
#cadre2 { margin-left: 270px; /* 避开左侧菜单宽度，留出间距 */ color: #2370AB; }
#menu, #menu ul { padding: 0; margin: 0; list-style: none; text-align: center; }
#menu li { display: block; position: relative; background-color: #2370AB; margin-bottom: 5px; }
#menu li a { display: block; padding: 10px; color: #fff; text-decoration: none; }
#menu li a:hover { background-color: #33A7FF; /* 鼠标悬停效果 */ }
/* 内容块默认隐藏，仅.active类的内容显示 */
#cadre2 div { display: none; padding: 15px; background-color: #fff; border-radius: 4px; }
#cadre2 div.active { display: block; }

3. 添加JavaScript交互逻辑 #

用原生JS实现点击事件，不需要依赖框架，简单直接：

// 获取所有菜单链接和内容块
const menuLinks = document.querySelectorAll('#menu li a');
const contentBlocks = document.querySelectorAll('#cadre2 div');

// 给每个菜单链接绑定点击事件
menuLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止a标签默认的跳转行为
    
    // 先隐藏所有内容块
    contentBlocks.forEach(block => block.classList.remove('active'));
    
    // 获取当前菜单对应的目标内容ID，显示对应的内容
    const targetId = this.getAttribute('data-target');
    document.getElementById(targetId).classList.add('active');
  });
});

关键要点说明 #

• 用data-target属性关联菜单和内容，避免硬编码ID，后续修改更方便
• 通过切换active类来控制内容的显示/隐藏，符合CSS优先的设计思路
• 原生JS实现，兼容性好，不需要额外引入库

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