Чем заменить родственный селектор css

191

05 июля 2018, 08:50

В первом варианте без оберток табы отрабатывают за счет вот этих стилей:

#tab_1:checked ~ #txt_1,
#tab_2:checked ~ #txt_2,
#tab_3:checked ~ #txt_3,
#tab_4:checked ~ #txt_4 {
  display: block; 
}

Вопрос: как добраться с помощью стилей к текстовым блокам во втором случае, если и переключатели, и текстовые блоки находятся в обертках, чтобы они отображались с переключением табов?
Не могу найти какие стили нужно применить.
Родственный селектор (тильда) ~ дает возможность доступа только к элементам с общим родителем.

.tabs { width: 100%; padding: 0px; margin: 0 auto; } 
.tabs>input { display:none; } 
.tabs>div { display: none; 
    padding: 12px; 
    border: 1px solid #C0C0C0; 
    background: #FFFFFF; 
} 
.tabs>label { 
    display: inline-block; 
    padding: 7px; 
    margin: 0 -5px -1px 0; 
    text-align: center; 
    color: #666666; 
    border: 1px solid #C0C0C0; 
    background: #E0E0E0; 
    cursor: pointer; 
} 
.tabs>input:checked + label { 
    color: #000000; 
    border: 1px solid #C0C0C0; 
    border-bottom: 1px solid #FFFFFF; 
    background: #FFFFFF; 
} 
#tab_1:checked ~ #txt_1, 
#tab_2:checked ~ #txt_2, 
#tab_3:checked ~ #txt_3, 
#tab_4:checked ~ #txt_4 { display: block; }

<div class="tabs"> 
    <input type="radio" name="inset" value="" id="tab_1" checked> 
    <label for="tab_1">Вкладка №1</label> 
 
    <input type="radio" name="inset" value="" id="tab_2"> 
    <label for="tab_2">Вкладка №2</label> 
 
    <input type="radio" name="inset" value="" id="tab_3"> 
    <label for="tab_3">Вкладка №3</label> 
 
    <input type="radio" name="inset" value="" id="tab_4"> 
    <label for="tab_4">Вкладка №4</label> 
 
    <div id="txt_1"> 
        <p>Произвольное содержимое...</p> 
        <p>Произвольное содержимое...</p> 
        <p>Произвольное содержимое...</p> 
    </div> 
    <div id="txt_2"> 
        <p>Вторая вкладка</p> 
    </div> 
    <div id="txt_3"> 
        <p>Размеры содержимого вкладок</p> 
        <p>могут отличаться по высоте!</p> 
    </div> 
    <div id="txt_4"> 
        <img src="image/logo.png" width="533" height="77" alt="Лого"> 
    </div> 
</div>

.tabs { width: 100%; padding: 0px; margin: 0 auto; } 
.tabs>.first>input { display:none; } 
.tabs>.second>div { display: none; 
    padding: 12px; 
    border: 1px solid #C0C0C0; 
    background: #FFFFFF; 
} 
.tabs>.first>label { 
    display: inline-block; 
    padding: 7px; 
    margin: 0 -5px -1px 0; 
    text-align: center; 
    color: #666666; 
    border: 1px solid #C0C0C0; 
    background: #E0E0E0; 
    cursor: pointer; 
} 
.tabs>.first>input:checked + label { 
    color: #000000; 
    border: 1px solid #C0C0C0; 
    border-bottom: 1px solid #FFFFFF; 
    background: #FFFFFF; 
} 
#tab_1:checked ~ #txt_1, 
#tab_2:checked ~ #txt_2, 
#tab_3:checked ~ #txt_3, 
#tab_4:checked ~ #txt_4 { display: block; }

<div class="tabs"> 
  <div class="first"> 
      <input type="radio" name="inset" value="" id="tab_1" checked> 
      <label for="tab_1">Вкладка №1</label> 
 
      <input type="radio" name="inset" value="" id="tab_2"> 
      <label for="tab_2">Вкладка №2</label> 
 
      <input type="radio" name="inset" value="" id="tab_3"> 
      <label for="tab_3">Вкладка №3</label> 
 
      <input type="radio" name="inset" value="" id="tab_4"> 
      <label for="tab_4">Вкладка №4</label> 
  </div> 
  <div class="second"> 
      <div id="txt_1"> 
          <p>Произвольное содержимое...</p> 
          <p>Произвольное содержимое...</p> 
          <p>Произвольное содержимое...</p> 
      </div> 
      <div id="txt_2"> 
          <p>Вторая вкладка</p> 
      </div> 
      <div id="txt_3"> 
          <p>Размеры содержимого вкладок</p> 
          <p>могут отличаться по высоте!</p> 
      </div> 
      <div id="txt_4"> 
          <img src="image/logo.png" width="533" height="77" alt="Лого"> 
      </div> 
    </div> 
</div>

Answer 1

Одним css'ом тут не обойтись - придётся использовать jQuery. В разметке нужно увязать инпут с вкладкой. Это можно сделать разными способами - я, например, в качестве value инпутов использовал id вкладок.

Далее в css нужно открыть первую вкладку по умолчанию (т.к. у нас первый инпут активен по умолчанию).

А дальше при клике на тот или иной инпут сопоставлять его с нужной вкладкой.

$('input').click(function(){ 
  var link = $(this).val(); //получаем значение, связывающее инпут с вкладкой 
  var tab = $('#'+link); //получаем нужную вкладку 
  tab.css('display','block'); //открываем эту вкладку 
  $('.second > div').not(tab).css('display','none'); //скрываем все другие вкладки 
});

.tabs { width: 100%; padding: 0px; margin: 0 auto; } 
.tabs>.first>input { display:none; } 
.tabs>.second>div { 
    padding: 12px; 
    border: 1px solid #C0C0C0; 
    background: #FFFFFF; 
} 
.tabs>.second>div:not(:first-child) { 
  display: none; 
} 
.tabs>.first>label { 
    display: inline-block; 
    padding: 7px; 
    margin: 0 -5px -1px 0; 
    text-align: center; 
    color: #666666; 
    border: 1px solid #C0C0C0; 
    background: #E0E0E0; 
    cursor: pointer; 
} 
.tabs>.first>input:checked + label { 
    color: #000000; 
    border: 1px solid #C0C0C0; 
    border-bottom: 1px solid #FFFFFF; 
    background: #FFFFFF; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="tabs"> 
  <div class="first"> 
      <input type="radio" name="inset" value="txt_1" id="tab_1" checked> 
      <label for="tab_1">Вкладка №1</label> 
 
      <input type="radio" name="inset" value="txt_2" id="tab_2"> 
      <label for="tab_2">Вкладка №2</label> 
 
      <input type="radio" name="inset" value="txt_3" id="tab_3"> 
      <label for="tab_3">Вкладка №3</label> 
 
      <input type="radio" name="inset" value="txt_4" id="tab_4"> 
      <label for="tab_4">Вкладка №4</label> 
  </div> 
  <div class="second"> 
      <div id="txt_1"> 
          <p>Произвольное содержимое...</p> 
          <p>Произвольное содержимое...</p> 
          <p>Произвольное содержимое...</p> 
      </div> 
      <div id="txt_2"> 
          <p>Вторая вкладка</p> 
      </div> 
      <div id="txt_3"> 
          <p>Размеры содержимого вкладок</p> 
          <p>могут отличаться по высоте!</p> 
      </div> 
      <div id="txt_4"> 
          <img src="image/logo.png" width="533" height="77" alt="Лого"> 
      </div> 
    </div> 
</div>

Создание сайта для дропшиппинга в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как удалить неиспользуемые стили css?

В chrome нету вкладки "legacy audits"Для firefox расширения в новой версии уже не поддерживаются Те сервисы которые нагуглил - почти все не работают

193

javascript

Функция onEdit не работает с IMPORTRANGE

Функция onEdit не работает с формулой IMPORTRANGE

198

javascript

Как определять mimetype node js?

Есть ли способ определять автоматически mymetype? Узнал, что у img по первым 3 байтам можно, а как определить у html, css, js файлов и каких - либо видеоформатов?

167

javascript

Nuxt.js и вопросы по статическому деплою

На данный момент делаю первый свой проект на Nuxtjs

174