Как обернуть группу тегов в div, чтобы работали вкладки (табы)?

Question

[NesteA88]

Добрый день!

На странице (https://itchief.ru/examples/lab.php?topic=css&file...) представлен пример реализации вкладок.

Задача: обернуть группу тегов (ниже) в div, чтобы вкладки корректно работали.

<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
    <label for="tab-btn-1">Вкладка 1</label>
    <input type="radio" name="tab-btn" id="tab-btn-2" value="">
    <label for="tab-btn-2">Вкладка 2</label>
    <input type="radio" name="tab-btn" id="tab-btn-3" value="">
    <label for="tab-btn-3">Вкладка 3</label>

При самостоятельной попытке решить данную задачу и внесение изменений в css (добавление diva) все правила css работают корректно, кроме этого:

#tab-btn-1:checked~#content-1,
    #tab-btn-2:checked~#content-2,
    #tab-btn-3:checked~#content-3 {
      display: block;
    }

Как решить данную задачу?

Comments

[Ankhena]

инпуты
потом div|ul с лейблами
потом div с контентными блоками
И селекторы с ~

Но вообще, JS

Answer 1

[Сергей delphinpro]

нормально решать, с использованием javascript. А таких примеров в интернете очень много.
Вкладки на CSS - это чисто академический пример возможностей языка, не более. Не стоит такие приемы применять на реальных сайтах.

Comments

[Сергей delphinpro]

но есть хочется жрать кактус, то вот

<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
<label for="tab-btn-1">Вкладка 1</label>
<input type="radio" name="tab-btn" id="tab-btn-2" value="">
<label for="tab-btn-2">Вкладка 2</label>
<input type="radio" name="tab-btn" id="tab-btn-3" value="">
<label for="tab-btn-3">Вкладка 3</label>

<div id="content-1"> ... </div>
<div id="content-2"> ... </div>
<div id="content-3"> ... </div>

#content-1,
#content-2,
#content-3 {
      display: none;
}
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3 {
      display: block;
}

[NesteA88]

Сергей, я не спорю насчет javascript. Но я и не разработчик. Просто решаю ту задачу, которая есть своими минимальными знаниями.

По поводу Вашего решения. Все равно не срабатывает правило display: block; для активной вкладки после оборачивания в div.

HTML должен быть таким:

<div class="tabs">
  <div class="classname">
    <input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
    <label for="tab-btn-1">Вкладка 1</label>
    <input type="radio" name="tab-btn" id="tab-btn-2" value="">
    <label for="tab-btn-2">Вкладка 2</label>
    <input type="radio" name="tab-btn" id="tab-btn-3" value="">
    <label for="tab-btn-3">Вкладка 3</label>
</div>
    <div id="content-1">
      Содержимое 1...
    </div>
    <div id="content-2">
      Содержимое 2...
    </div>
    <div id="content-3">
      Содержимое 3...
    </div>
  </div>

Во все правила CSS добавляю класс нового дива .classname. Все работает корректно, кроме

#tab-btn-1:checked~#content-1,
    #tab-btn-2:checked~#content-2,
    #tab-btn-3:checked~#content-3 {
      display: block;
    }

[Сергей delphinpro]

NesteA88, почему вы сразу не показали нужную разметку? Я бы не стал тратить время...
С такой разметкой решение есть только при использовании селектора :has, но он до сих пор не работает в FireFox

.classname:has(#tab-btn-1:checked) ~ #content-1 { display: block; }
/* или */
.tabs:has(#tab-btn-1:checked) #content-1 { display: block; }

Понятно, что использовать такое не стоит тем более.

[Сергей delphinpro]

NesteA88, Хотя вообще-то можно извернуться...

<div class="tabs">
  <div class="classname">
    <label for="tab-btn-1">Вкладка 1</label>
    <label for="tab-btn-2">Вкладка 2</label>
    <label for="tab-btn-3">Вкладка 3</label>
  </div>

  <input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
  <input type="radio" name="tab-btn" id="tab-btn-2" value="">
  <input type="radio" name="tab-btn" id="tab-btn-3" value="">

  <div id="content-1">
      Содержимое 1...
  </div>
  <div id="content-2">
      Содержимое 2...
  </div>
  <div id="content-3">
      Содержимое 3...
  </div>
</div>

Инпуты скрыть от пользователя ( .tabs input[type=radio] { display: none; } )
А селекторы подойдут из первого варианта.

[NesteA88]

Этот вариант заставляет работать данное правило CSS:

#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3 {
      display: block;
}

Но тогда перестают работать правила для label:

.tabs>input[type="radio"]:checked+label {
background-color: #fff;
border-bottom: 1px solid #fff;
}

Большое спасибо за помощь! По итогу я отказался от этой идеи. Буду думать в сторону javascript.

[Сергей delphinpro]

NesteA88, тогда вам нужно перенести инпуты выше меток

<div class="tabs">
  <input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
  <input type="radio" name="tab-btn" id="tab-btn-2" value="">
  <input type="radio" name="tab-btn" id="tab-btn-3" value="">

  <div class="classname">
    <label for="tab-btn-1">Вкладка 1</label>
    <label for="tab-btn-2">Вкладка 2</label>
    <label for="tab-btn-3">Вкладка 3</label>
  </div>

  <div id="content-1">
      Содержимое 1...
  </div>
  <div id="content-2">
      Содержимое 2...
  </div>
  <div id="content-3">
      Содержимое 3...
  </div>
</div>

#content-1,
#content-2,
#content-3 {
      display: none;
}
#tab-btn-1:checked ~ #content-1,
#tab-btn-2:checked ~ #content-2,
#tab-btn-3:checked ~ #content-3 {
      display: block;
}
#tab-btn-1:checked ~ .classname label[for="tab-btn-1"],
#tab-btn-2:checked ~ .classname label[for="tab-btn-2"],
#tab-btn-3:checked ~ .classname label[for="tab-btn-3"] {
      background-color: #fff;
      border-bottom: 1px solid #fff;
}

[NesteA88]

Сергей, благодарю! Так все работает!

[NesteA88]

Сергей, добрый вечер! Есть возможность с Вами связаться во вопросу данных вкладок и вкладок на javascript с конкретными ссылками на сайт вне ответов в данном топике?