Как изменить цвет выбранной вкладки в CSS: целевое свойство без Javascript?

Question

Я пытаюсь изменить текущий цвет вкладки в CSS и вкладку, созданную с использованием свойства: target CSS. Проблема в том, что я не могу найти текущую нажатую вкладку при использовании свойства: 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

Лучший способ имитировать фактическое событие нажатия, используя только CSS, это использовать флажок. Он работает, прикрепляя метку к элементу с помощью атрибута метки for = "" и используя атрибут: checked для обнаружения нажатой вкладки.

Answer 2

В настоящее время ваша функция переключения вкладок не работает. Ваши правила для отображения .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>