CSS标签页点击后内容保持显示的技术问题求助

问题描述 #

使用CSS实现标签页组件时，点击标签可正常显示对应内容，但再次点击该标签或内容区域时，内容会自动隐藏，需要实现点击标签后内容保持显示的效果。

原代码问题分析 #

原方案使用focus-within伪类控制内容显示，该伪类仅在元素或其子元素获得焦点时生效。当再次点击标签（按钮失去焦点）或点击内容区域时，元素失去焦点，focus-within状态消失，导致内容隐藏。要实现持久显示，需改用基于表单控件checked状态的方案。

修改后的代码实现 #

HTML代码 #

<div class="container">
  <div class="tabs">
    <div class="lblUk">
      <!-- 用radio实现单选逻辑，同一组标签共享name属性 -->
      <input type="radio" name="tabGroup" id="tab-a" checked>
      <label for="tab-a" class="tab-btn">M/25</label>
      
      <input type="radio" name="tabGroup" id="tab-b">
      <label for="tab-b" class="tab-btn">S/40</label>
      
      <input type="radio" name="tabGroup" id="tab-c">
      <label for="tab-c" class="tab-btn">X/21</label>
      
      <input type="radio" name="tabGroup" id="tab-d">
      <label for="tab-d" class="tab-btn">L/45</label>
      
      <input type="radio" name="tabGroup" id="tab-e">
      <label for="tab-e" class="tab-btn">XL/50</label>
      
      <div class="ct-box">
        <div class="ct-a">a ct</div>
        <div class="ct-b">b ct</div>
        <div class="ct-c">c ct</div>
        <div class="ct-d">d ct</div>
        <div class="ct-e">e ct</div>
      </div>
    </div>
  </div>
</div>

CSS代码 #

/* 隐藏radio按钮 */
input[type="radio"] {
  display: none;
}

.tabs {
  width: 100%;
}

/* 标签按钮样式 */
.tab-btn {
  display: inline-block;
  position: relative;
  height: 60px;
  line-height: 60px;
  padding: 0 16px;
  background: #fff;
  cursor: pointer;
  border: 1px solid #eee;
}

.ct-box {
  text-align: left;
  border: 1px solid #eee;
  padding: 16px;
}

/* 默认隐藏所有内容区块 */
.ct-box > div {
  display: none;
}

/* 根据radio的选中状态显示对应内容 */
#tab-a:checked ~ .ct-box .ct-a {
  display: block;
}
#tab-b:checked ~ .ct-box .ct-b {
  display: block;
}
#tab-c:checked ~ .ct-box .ct-c {
  display: block;
}
#tab-d:checked ~ .ct-box .ct-d {
  display: block;
}
#tab-e:checked ~ .ct-box .ct-e {
  display: block;
}

方案说明 #

1. 改用radio表单控件替代原单个checkbox，并设置相同name属性实现单选逻辑，确保同一时间仅一个标签处于选中状态。
2. 用label关联对应radio，点击标签即可切换radio的checked状态，该状态会持久保留直到切换其他标签。
3. 通过radio的:checked伪类结合兄弟选择器，精准控制对应内容区块的显示/隐藏，实现点击标签后内容持续显示的效果。

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