跨层级场景下，点击单选按钮显示对应Div的实现方案

纯CSS实现方案（优先推荐） #

用CSS的:has()选择器就能解决跨层级关联的问题，它支持父元素根据子元素的状态设置样式，主流浏览器（Chrome、Edge、Safari 15.4+）都已兼容。

代码示例 #

HTML结构

<div class="tab-controls">
  <input type="radio" name="content-tab" id="tab-albums" />
  <label for="tab-albums">Albums</label>
  <input type="radio" name="content-tab" id="tab-articles" checked />
  <label for="tab-articles">Articles</label>
</div>

<div class="content-area">
  <div class="content-albums">相册相关内容</div>
  <div class="content-articles">文章相关内容</div>
</div>

CSS样式

/* 默认隐藏所有内容，仅显示文章区域 */
.content-area > div {
  display: none;
}
.content-articles {
  display: block;
}

/* 选中Albums时，切换显示相册内容 */
.tab-controls:has(#tab-albums:checked) ~ .content-area .content-albums {
  display: block;
}
.tab-controls:has(#tab-albums:checked) ~ .content-area .content-articles {
  display: none;
}

/* 选中Articles时，切换显示文章内容 */
.tab-controls:has(#tab-articles:checked) ~ .content-area .content-articles {
  display: block;
}
.tab-controls:has(#tab-articles:checked) ~ .content-area .content-albums {
  display: none;
}

JavaScript兼容方案（适配旧版浏览器） #

如果需要兼容不支持:has()的旧浏览器，用JS绑定事件来控制内容显示：

代码示例 #

HTML结构（和纯CSS方案一致）

JavaScript代码

// 获取元素
const tabInputs = document.querySelectorAll('input[name="content-tab"]');
const albumContent = document.querySelector('.content-albums');
const articleContent = document.querySelector('.content-articles');

// 初始状态：显示文章内容
articleContent.style.display = 'block';
albumContent.style.display = 'none';

// 给单选按钮绑定切换事件
tabInputs.forEach(input => {
  input.addEventListener('change', function() {
    if (this.id === 'tab-albums') {
      albumContent.style.display = 'block';
      articleContent.style.display = 'none';
    } else if (this.id === 'tab-articles') {
      articleContent.style.display = 'block';
      albumContent.style.display = 'none';
    }
  });
});

内容的提问来源于stack exchange，提问作者Sampat Lal Aheer