CSS实现两个可点击元素切换显示不同内容求助

没问题！这种点击切换内容的需求，纯CSS完全可以实现，我先给你一个优先推荐的纯CSS方案，再补充更灵活的JavaScript方案，都能完美匹配你的需求：

核心思路是用**隐藏的单选按钮（radio）**作为交互触发点，结合CSS的:checked伪类来控制内容的显示隐藏，同时给激活的点击区域添加样式，完全不需要JavaScript：

完整代码实现 #

<div class="toggle-container">
  <!-- 隐藏的单选按钮，作为触发源 -->
  <input type="radio" name="content-toggle" id="toggle1" checked>
  <label for="toggle1" class="test">点击查看内容1</label>
  
  <input type="radio" name="content-toggle" id="toggle2">
  <label for="toggle2" class="test">点击查看内容2</label>

  <!-- 内容区域 -->
  <div class="content-block text1">
    <p>这是内容1的对应文本</p>
    <img src="你的图片1地址" alt="内容1展示图">
  </div>
  <div class="content-block text2">
    <p>这是内容2的对应文本</p>
    <img src="你的图片2地址" alt="内容2展示图">
  </div>
</div>

/* 隐藏单选按钮，只用作触发逻辑 */
input[type="radio"] {
  display: none;
}

/* 可点击区域的基础样式 */
.test {
  float: left;
  margin: 5px;
  padding: 5px;
  cursor: pointer; /* 提示用户这是可点击元素 */
}

/* 激活状态的样式（点击后的灰色背景） */
input[type="radio"]:checked + .test {
  background-color: gray;
}

/* 内容块的基础样式 */
.content-block {
  clear: both; /* 清除浮动，避免和点击区域重叠 */
  padding: 10px;
}

/* 默认显示内容1，隐藏内容2 */
.text1 {
  display: block;
  background-color: gray;
}
.text2 {
  display: none;
}

/* 选中toggle2时，切换内容显示状态 */
#toggle2:checked ~ .text2 {
  display: block;
  background-color: gray;
}
#toggle2:checked ~ .text1 {
  display: none;
}

关键细节说明 #

• 单选按钮的name属性必须相同，确保同一时间只能选中一个，实现互斥切换。
• label的for属性和对应radio的id绑定，点击label就等同于点击radio，触发:checked状态。
• 用~（通用兄弟选择器）控制radio后面的内容块，只要内容块在radio标签之后即可，结构约束很小。

如果觉得纯CSS的结构约束有点麻烦，用JS实现会更自由，不需要依赖radio的结构关系：

完整代码实现 #

<div class="toggle-container">
  <div class="test active">点击查看内容1</div>
  <div class="test">点击查看内容2</div>

  <div class="content-block text1 active">
    <p>这是内容1的对应文本</p>
    <img src="你的图片1地址" alt="内容1展示图">
  </div>
  <div class="content-block text2">
    <p>这是内容2的对应文本</p>
    <img src="你的图片2地址" alt="内容2展示图">
  </div>
</div>

.test {
  float: left;
  margin: 5px;
  padding: 5px;
  cursor: pointer;
}
/* 激活状态的灰色背景 */
.test.active {
  background-color: gray;
}

.content-block {
  clear: both;
  padding: 10px;
  display: none;
}
/* 激活的内容块显示 */
.content-block.active {
  display: block;
  background-color: gray;
}

// 获取所有可点击区域和内容块
const toggles = document.querySelectorAll('.test');
const contentBlocks = document.querySelectorAll('.content-block');

toggles.forEach((toggle, index) => {
  toggle.addEventListener('click', () => {
    // 先移除所有元素的激活状态
    toggles.forEach(item => item.classList.remove('active'));
    contentBlocks.forEach(block => block.classList.remove('active'));
    // 给当前点击的区域和对应内容添加激活状态
    toggle.classList.add('active');
    contentBlocks[index].classList.add('active');
  });
});

关键细节说明 #

• 通过添加/移除active类来控制样式和显示状态，结构上完全自由，不需要严格的兄弟元素关系。
• 点击事件里先清空所有激活状态，再给当前项加类，确保每次只有一组内容显示。

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