Компонент переключения контента построен 3 способами: jQuery, JS, CSS

Или вы можете проверить полную страницу демо здесь .

Но прежде чем мы продолжим … Если вы выбрали опцию из выбранного входа и затем обновили страницу, значение ввода может остаться, но соответствующая панель не отображается.

Мы можем исправить это, добавив следующее:

 if (selectInput.value !== 'nul') { currentSelect = selectInput.value; addShow(currentSelect); } 

Эта конструкция if проверит, является ли значение selectInput чем-то отличным от nul . Если это так, то значение текущего выбора addShow() функцию addShow() , которая addShow() при перезагрузке страницы. Удобно, чтобы исправить тот редкий случай, когда страница обновлялась, а элемент select отображал значение, но соответствующий контент не отображался.

И, наконец, в случае, если вам требуется поддержка Internet Explorer 9 или ниже, мы не можем использовать classList() . Чтобы обойти это, вот функции для добавления и удаления классов из элемента. Вышеприведенные демонстрации CodePen используют эти функции:

 function addClass(elm, newClass) { elm.className += ' ' + newClass; } function removeClass(elm, deleteClass) { elm.className = elm.className.replace(new RegExp("\\b" + deleteClass + "\\b", 'g'), '').trim(); /* the RegExp here makes sure that only the class we want to delete, and not any other potentially matching strings get deleted. */ } 

Это можно сделать только с помощью CSS?

Имея множество компонентов, которые я делаю, я хотел бы попытаться понять, насколько близко я могу их воспроизвести в чистом CSS-решении. Однако, если решения jQuery и vanilla JavaScript могут основываться на одной и той же разметке, необходимо изменить только решение CSS.

Самым большим и самым важным изменением по сравнению с предыдущими версиями является то, что select должен быть полностью заменен. Если в предыдущих примерах использовалось значение элемента select для изменения отображаемой панели содержимого, один только CSS не знает об этих изменениях значений и, следовательно, не может использовать разные значения для переключения различных цепочек селектора.

Элемент select будет просто необходимо воссоздать, и для этого мы будем использовать так называемый «флажок / переключатель радиокнопок».

Вот разметка для нашего нового «элемента select ».

 <input type='checkbox' class="invis" id="open_close" /> <input type='radio' name='opts' class="invis" id="opt1" /> <input type='radio' name='opts' class="invis" id="opt2" /> <input type='radio' name='opts' class="invis" id="opt3" /> <header class="header-base"> <div class="content"> <p> Choose an Option </p> <div class="select-area"> <label for="open_close" class="input-select"> ... </label> <ul class="select-options"> <li> <label for="opt1">Option 1</label> </li> <li> <label for="opt2">Option 2</label> </li> <li> <label for="opt3">Option 3</label> </li> </ul> </div> </div> </header> 

То, что сделано здесь, в основном представляет собой воссоздание элемента select насколько это позволяют HTML и CSS, без помощи JavaScript. Входные данные над заголовком действуют как элементы управления для привязок стиля для панелей select и содержимого на сайте. И новый неупорядоченный список и метки становятся нашим новым элементом select .

Метки для opt1, opt2 и opt3 изменяют проверенное состояние переключателей с соответствующими идентификаторами. В CSS, в зависимости от того, какая радиокнопка выбрана, соответствующая панель настраивается для отображения с использованием общего селектора родного брата.

 #opt1:checked ~ main .opt1, #opt2:checked ~ main .opt2, #opt3:checked ~ main .opt3 { display: block; height: 100%; overflow: visible; visibility: visible; } 

Существует множество мелких деталей для репликации элемента select , которые зависят от соответствующей переключаемой кнопки и общего селекторного элемента CSS. Для получения дополнительной информации об общем селекторе братьев и сестер и других полезных вещах, которые вы можете сделать только с помощью CSS, вам следует ознакомиться с моими статьями « Как это можно сделать с помощью CSS?». и CSS Morphing Menu .

 #open_close:checked ~ .header-base .select-area .select-options { opacity: 1; visibility: visible; } #open_close:checked ~ .header-base .select-area:after { border: none; content: 'X'; top: -24px; } 

 .input-select:before { content: 'Make a Selection'; } #opt1:checked ~ .header-base .input-select:before { content: 'Option 1'; } #opt2:checked ~ .header-base .input-select:before { content: 'Option 2'; } #opt3:checked ~ .header-base .input-select:before { content: 'Option 3'; }