Активация двух меток одним кликом - PullRequest
Новая
       30

Активация двух меток одним кликом

0 голосов
/ 27 сентября 2018

Я пытаюсь использовать "галочку" для дизайна группы вкладок.щелчок на одной вкладке (ярлыке) устанавливает флажок радио.Затем с помощью селектора ~ я могу переключать страницы между дисплеями: блок / нет;

. Чтобы проиллюстрировать эту настройку, сначала есть ряд кнопок вкладок, а затем ряд страниц.Коробки радио живут как братья и сестры в контейнере страниц.

+-------------------+
| +------+ +------+ |
| | tab1 | | tab2 | |
| +------+ +------+ |
+-------------------+
| +---------------+ |
| |     page 1    | |
| +---------------+ |
| +---------------+ |
| |     page 2    | |
| +---------------+ |
+-------------------+

Эта основная функция работает, страницы меняются, как и ожидалось.

Теперь к следующей части, где у меня возникли проблемы ...

Когда вы нажимаете на вкладку, мне нужно изменить ее CSS, чтобы он выглядел "выбранным".Так как переключатели находятся в контейнере страниц, я не могу использовать их и селектор брата для самостоятельной стилизации вкладок.Кажется, мне нужен другой набор переключателей, на этот раз в контейнере вкладок.

Я получил этот второй «хак с чекбоксом», но теперь я не могу выполнить эти две функции одновременно.Вкладки построены так: 

<label for='tab_selector_1'>
    <input id='tab_selector_1' type='radio'/>
    <label for='page_selector_1' id='tab_1'>TAB NAME</label>
</label>

Я ожидал, что щелчок пробьет два ярлыка и активирует оба флажка, но он действует только на самый глубокий ярлык.В этом случае только переключение страницы, а не стиль вкладки.

Есть ли какой-нибудь способ реструктурировать это или использовать разные селекторы CSS, чтобы заставить его работать?HTML может быть изменен, если это плохой способ сделать это, мне просто нужно, чтобы это было решение не-js.

DEMO: https://codepen.io/sammurphey/pen/RebNYo

1 Ответ

0 голосов
/ 27 сентября 2018

<input type="radio"> Высокий и скрытый

Разместите радиокнопки на более высоком уровне, чем элементы, на которые вы хотите переключать стили, и назначьте их display:none.

Пример 

<form>
    <input id='tab0' type='radio'> <!--#tab0 ~ fieldset > legend > [for=tab0] -->
    <input id='tab1' type='radio'> <!--#tab1 + fieldset > legend > [for=tab1] -->
      <fieldset>
         <legend>
            <label for='tab0'>Page 0</label>
            <label for='tab1'>Page 1</label>
         </legend>

Примечание: Вам нужен только один <label> и один <input> для оформления вкладки и соответствующей страницы.Опубликовано полнофункциональную демонстрацию этого шаблона и ссылку на форк рефакторинга кода OP.

CODEPEN

Демо 

html,
body {
  width: 100&;
  height: 100%;
}

.tab {
  display: none
}

.tabs {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tabs label {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tabs label:hover {
  background-color: #ddd;
}

#tab0:checked~fieldset .tabs>[for=tab0],
#tab1:checked+fieldset>.tabs>[for=tab1] {
  background-color: #ccc;
}

.page {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

#tab0:checked~fieldset>#page0,
#tab1:checked+fieldset>#page1 {
  display: block;
}
<main>

  <form id='ui'>


    <input id='tab0' class='tab' name='tab' type='radio' checked='true'>
    <input id='tab1' class='tab' name='tab' type='radio'>

    <fieldset>
      <legend class="tabs">
        <label for='tab0' class='btn'>Page 0</label>
        <label for='tab1' class='btn'>Page 1</label>
      </legend>
      <section id='page0' class='page'>
        <article>
          <h1>Page 0 Content</h1>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </article>
      </section>

      <section id='page1' class='page'>
        <article>
          <h1>Page 1 Content</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
      </section>


    </fieldset>
  </form>

</main>
...