如何在没有任何Javascript的情况下更改CSS：target属性中选定选项卡的颜色？

Question

我正在尝试更改CSS中的当前标签页颜色以及使用CSS的：target属性创建的标签页。问题是使用：target属性时，我找不到当前单击的选项卡。因此，我想在单击时显示活动选项卡。另外，我需要默认显示第一个选项卡。有人可以帮我解决吗？

下面是我的代码：

.tab {
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
}

.tab li {
  color: var(--dark);
  margin-right: 15px;
  font-size: 22px;
  position: relative;
}

.tab li:after {
  height: 1px;
  content: '';
  background-color: rgb(10, 170, 219) !important;
  width: 100%;
  position: absolute;
  left: 0;
}

.tab li h2 {
  font-size: inherit;
}

.tab li a {
  text-decoration: none;
  color: inherit;
}

#tab .tab-content {
  display: none;
}

#tab .tab-content:target {
  display: block;
}

<div id="tab">
  <ul class="tab">
    <li>
      <h2><a href="#tab1">Tab1</a></h2>
    </li>
    <li>
      <h2><a href="#tab2">Tab2</a></h2>
    </li>
  </ul>
<div id="tab1" class="tab-content">Content1</div>
<div id="tab2" class="tab-content">Content2</div>
</div>

Answer 1

当前，您的标签页切换功能不起作用。您显示.tab-content的规则使用错误的选择器。只需将#tab1和#tab2移至主要#tab元素内即可。这样颜色样式就很容易了。

.tab {
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
}

.tab li {
  color: var(--dark);
  margin-right: 15px;
  font-size: 22px;
  position: relative;
}

.tab li:after {
  height: 1px;
  content: '';
  background-color: rgb(10, 170, 219) !important;
  width: 100%;
  position: absolute;
  left: 0;
}

.tab li h2 {
  font-size: inherit;
}

.tab li a {
  text-decoration: none;
  color: inherit;
}

#tab .tab-content {
  display: none;
}

#tab .tab-content:target {
  display: block;
}

<div id="tab">
  <ul class="tab">
    <li>
      <h2><a href="#tab1">Tab1</a></h2>
    </li>
    <li>
      <h2><a href="#tab2">Tab2</a></h2>
    </li>
  </ul>
    <div id="tab1" class="tab-content">Content1</div>
    <div id="tab2" class="tab-content">Content2</div>
</div>

Answer 2

仅使用CSS模拟实际点击事件的最佳方法是使用复选框。它通过标签的for =“”属性将标签附加到元素，然后使用：checked属性来检测单击的选项卡。