基于CSS的标签页（可配JS）：仅child2激活时显示parent2的方案

这个问题很典型！咱们先理清楚为啥你之前的CSS尝试没效果，再给你两个靠谱的实现方案～

为啥纯CSS直接写行不通？ #

你的HTML结构里，child2是parent1的子元素，而parent2和parent1是同级关系。CSS选择器的规则是只能向下/向后遍历，没法从子元素child2往上找到父元素parent1，再选中它的同级parent2——这超出了CSS的能力范围，所以纯CSS直接写肯定无效，得换思路。

方案1：用JavaScript（不用改现有HTML结构） #

这是最适配你当前HTML结构的方案，通过监听标签点击事件，判断child2是否激活，来控制parent2的显示/隐藏。

完整代码示例：

<div class="parent1">
  <div class="child1">标签1</div>
  <div class="child2 active">标签2</div>
  <div class="child3">标签3</div>
</div>
<div class="parent2" style="display: block;">Content here</div>

<script>
// 获取所有标签页元素
const tabs = document.querySelectorAll('.parent1 > div');
// 拿到要控制显示的parent2
const parent2 = document.querySelector('.parent2');

// 页面加载先检查一次，确保初始状态正确
checkChild2Status();

// 给每个标签加点击事件
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 先移除所有标签的active类
    tabs.forEach(t => t.classList.remove('active'));
    // 给当前点击的标签加上active
    tab.classList.add('active');
    // 检查child2是否激活，更新parent2的显示
    checkChild2Status();
  });
});

// 封装检查逻辑，复用性更好
function checkChild2Status() {
  const isActive = document.querySelector('.child2').classList.contains('active');
  parent2.style.display = isActive ? 'block' : 'none';
}
</script>

<style>
/* 可选：给标签加些样式，让交互更直观 */
.parent1 > div {
  display: inline-block;
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid #ddd;
  margin-right: 4px;
}
.parent1 > div.active {
  background-color: #f0f0f0;
  border-bottom-color: transparent;
}
.parent2 {
  display: none; /* 默认隐藏 */
  padding: 16px;
  border: 1px solid #ddd;
  margin-top: -1px;
}
</style>

逻辑说明：

1. 页面加载时先跑一次检查，确保如果child2默认带active类，parent2能正常显示。
2. 点击任意标签时，先清空所有标签的active状态，再给当前点击的标签加上，然后判断child2是否激活，动态设置parent2的display属性。

方案2：调整HTML结构，用纯CSS实现（不用JS） #

如果允许修改HTML结构，可以把parent2移到parent1内部，作为child2的同级元素，这样就能用CSS的兄弟选择器直接控制显示了。

修改后的代码示例：

<div class="parent1">
  <div class="child1">标签1</div>
  <div class="child2 active">标签2</div>
  <div class="child3">标签3</div>
  
  <!-- 把parent2移到parent1里面，和child2同级 -->
  <div class="parent2">Content here</div>
</div>

<style>
.parent1 > div[class^="child"] {
  display: inline-block;
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid #ddd;
  margin-right: 4px;
}
.parent1 > div[class^="child"].active {
  background-color: #f0f0f0;
  border-bottom-color: transparent;
}
.parent2 {
  display: none;
  padding: 16px;
  border: 1px solid #ddd;
  margin-top: -1px;
}
/* 核心：当child2有active类时，显示它后面的parent2 */
.child2.active ~ .parent2 {
  display: block;
}
</style>

逻辑说明：

用CSS的通用兄弟选择器(~)，当.child2.active存在时，选中它之后的同级.parent2元素，把display设为block。这种方案完全不用JS，但需要调整HTML结构。

总结 #

• 要是不能改现有HTML结构，方案1的JS实现直接能用，逻辑清晰好维护。
• 要是可以调整结构，方案2的纯CSS实现更简洁，不用依赖脚本。

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