Показать/скрыть контент с помощью радио без Javascript
Я пытаюсь показать/скрыть некоторый контент, просто используя CSS и переключатели. Я нашел кое-что в Stack Overflow, что помогает https://jsfiddle.net/LLornfn8/
Однако мне нужно обернуть мои радиоприемники в некоторые элементы div, чтобы обрабатывать некоторые общие стили, что означает, что исходный код JSFiddle нарушается, например:
#input_description:checked ~ #contentDescription, #input_shipping:checked ~ #contentShipping {
display: block;
}
#contentDescription, #contentShipping{
display: none;
}
.radio_item_menu:checked + .label_item_menu {
font-weight: bold;
}<div id = "radioGroup">
<div class = "myRadioStyle">
<input type = "radio" name = "navbar_menu_store" id = "input_description" class = "radio_item_menu">
<label for = "input_description" class = "label_item_menu">Description</label>
</div>
<div class = "myRadioStyle">
<input type = "radio" name = "navbar_menu_store" id = "input_shipping" class = "radio_item_menu">
<label for = "input_shipping" class = "label_item_menu">Shipping</label>
</div>
</div>
<div id = "contentDescription"><p class = "testo_scheda">
This is some text</p>
</div>
<div id = "contentShipping"><p class = "testo_scheda">
This is some other text</p>
</div>Я не очень знаком с такими селекторами, как ~. Мне интересно, есть ли еще способ заставить эту работу работать?
Я просмотрел Stack Overflow и нашел несколько похожих вещей, но все они, похоже, обрабатывают это так же, как исходный пример, а не объекты, вложенные по-разному. Я пробовал играть с разными селекторами, чтобы нацелиться на скрытые элементы div, но все еще не могу заставить его работать. Когда вы делаете выбор, ничего не отображается.
Это здорово, спасибо! Все еще пытаюсь понять, как это работает!
Хотя вы приняли ответ, мне интересно следующее утверждение: «Мне нужно обернуть мои радиоприемники в некоторые элементы div, чтобы обрабатывать некоторые общие стили», какой стиль вам нужен? Возможно, если стиль можно реализовать другим способом, вам не придется корректировать HTML так, как вы думаете; Существует много способов решения или уменьшения проблем во внешнем мире. Возможно, стоит задать отдельный вопрос, но я оставляю это на ваше усмотрение.
Я использую готовые компоненты, прошедшие тестирование доступности, и хотя я могу их воссоздать, это будет означать, что они снова пройдут тщательное тестирование. Они были построены так, что входные данные находятся внутри элементов div. Поэтому вместо того, чтобы проходить процесс восстановления, я задавался вопросом, есть ли способ сделать это без этого.
Ответы 3
С вашей фактической структурой HTML псевдокласс :has() был бы полезен, но, к сожалению, он еще не реализован должным образом. В настоящее время Firefox не работает. https://developer.mozilla.org/en-US/docs/Web/CSS/:имеет
Вот пример теории для тестирования в другом месте, кроме Firefox. (ниже этого фрагмента есть еще два фрагмента, работающие повсюду, требующие изменения HTML — последний фрагмент должен быть тем, что вы ищете)
#radioGroup:has(#input_description:checked ) ~ #contentDescription, #radioGroup:has(#input_shipping:checked )~ #contentShipping {
display: block;
}
#contentDescription, #contentShipping{
display: none;
}
.radio_item_menu:checked + .label_item_menu {
font-weight: bold;
}<div id = "radioGroup">
<div class = "myRadioStyle">
<input type = "radio" name = "navbar_menu_store" id = "input_description" class = "radio_item_menu">
<label for = "input_description" class = "label_item_menu">Description</label>
</div>
<div class = "myRadioStyle">
<input type = "radio" name = "navbar_menu_store" id = "input_shipping" class = "radio_item_menu">
<label for = "input_shipping" class = "label_item_menu">Shipping</label>
</div>
</div>
<div id = "contentDescription"><p class = "testo_scheda">
This is some text</p>
</div>
<div id = "contentShipping"><p class = "testo_scheda">
This is some other text</p>
</div>В Firefox и более старых браузерах входные данные должны располагаться рядом (и впереди в потоке) с скрываемыми элементами (или их родительскими элементами).
Итак, для Firefox на данный момент вам необходимо вывести входные данные за пределы их контейнера, чтобы они были смежными с элементом, который нужно скрыть, или, по крайней мере, родителем этого элемента.
Версия Firefox может быть
#input_description:checked~#contentDescription,
#input_shipping:checked~#contentShipping {
display: block;
}
#contentDescription,
#contentShipping {
display: none;
}
.radio_item_menu:checked+.label_item_menu {
font-weight: bold;
}<input type = "radio" name = "navbar_menu_store" id = "input_description" class = "radio_item_menu">
<label for = "input_description" class = "label_item_menu">Description</label>
<br>
<input type = "radio" name = "navbar_menu_store" id = "input_shipping" class = "radio_item_menu">
<label for = "input_shipping" class = "label_item_menu">Shipping</label>
<div id = "contentDescription">
<p class = "testo_scheda">
This is some text</p>
</div>
<div id = "contentShipping">
<p class = "testo_scheda">
This is some other text</p>
</div>Другой вариант также может состоять в том, чтобы взять входные данные только снаружи и воссоздать их из псевдо, прикрепленного к меткам.
Вот еще один вариант хранения ваших контейнеров
#input_description:checked ~ #contentDescription ,
#input_shipping:checked ~ #contentShipping {
display: block;
}
#contentDescription, #contentShipping{
display: none;
}
.radio_item_menu:checked + .label_item_menu {
font-weight: bold;
}
/* hide the radios and create fake ones */
[type = "radio"] {display:none;}
label {display:inline-block;}
.label_item_menu:before {
content:'';
display:inline-block;
width:10px;
aspect-ratio:1;
border-radius:50%;
border:1px solid;
vertical-align:middle;
margin:0 3px;
color:#555;
}
#input_description:checked ~ #radioGroup [for = "input_description"]:before ,
#input_shipping:checked ~ #radioGroup [for = "input_shipping"]:before {
color:blue;
background: radial-gradient(circle at 50%, blue 50%, transparent 50%);
}<!-- hidden radios , adjacent to content to toggle -->
<input type = "radio" name = "navbar_menu_store" id = "input_description" class = "radio_item_menu">
<input type = "radio" name = "navbar_menu_store" id = "input_shipping" class = "radio_item_menu">
<!-- end adjacent hidden radios -->
<div id = "radioGroup"><!-- fake radios drawn aside labels with a pseudo , requires to be styled -->
<div class = "myRadioStyle">
<label for = "input_description" class = "label_item_menu">Description</label>
</div>
<div class = "myRadioStyle">
<label for = "input_shipping" class = "label_item_menu">Shipping</label>
</div>
</div>
<div id = "contentDescription">
<p class = "testo_scheda">
This is some text</p>
</div>
<div id = "contentShipping">
<p class = "testo_scheda">
This is some other text</p>
</div>Вы также всегда можете использовать Javascript. Это позволит вам модифицировать HTML с небольшими изменениями, необходимыми для того, чтобы JavaScript продолжал работать.
В своем ответе на основе Javascript я дал вашим элементам div контента класс под названием content div, который позволит легко изменять CSS, а также вызывать вызовы JavaScript. Я также создал активный класс, который меняет отображение на блокировку.
Каждому из переключателей я дал атрибут данных цели. Это будет ссылка на div для этого радио.
Затем я просто даю каждому радиоприемнику прослушиватель событий изменения. И я ищу активный div и удаляю класс, а затем добавляю активный класс в целевой div для радио.
const navbar_menu_store = document.querySelectorAll("[name='navbar_menu_store']");
const changeRadio = (ev) => {
const hasActive = document.querySelector(".contentDiv.active");
if (hasActive)hasActive.classList.remove("active")
const el = document.querySelector(ev.target.dataset.target);
el.classList.add("active")
};
navbar_menu_store.forEach((i) => i.addEventListener("change",changeRadio)).contentDiv{
display: none;
}
.contentDiv.active{display:block;}
.radio_item_menu:checked + .label_item_menu {
font-weight: bold;
}<div id = "radioGroup">
<div class = "myRadioStyle">
<input data-target = "#contentDescription" type = "radio" name = "navbar_menu_store" id = "input_description" class = "radio_item_menu">
<label for = "input_description" class = "label_item_menu">Description</label>
</div>
<div class = "myRadioStyle">
<input data-target = "#contentShipping" type = "radio" name = "navbar_menu_store" id = "input_shipping" class = "radio_item_menu">
<label for = "input_shipping" class = "label_item_menu">Shipping</label>
</div>
</div>
<div id = "contentDescription" class = "contentDiv"><p class = "testo_scheda">
This is some text</p>
</div>
<div id = "contentShipping" class = "contentDiv"><p class = "testo_scheda">
This is some other text</p>
</div>Возможно, вы захотите изменить свой код на что-то вроде этого
#input_description:checked ~ #contentDescription,
#input_shipping:checked ~ #contentShipping {
display: block;
}
#contentDescription,
#contentShipping {
display: none;
}
.myRadioStyle input:checked + .label_item_menu {
font-weight: bold;
}<div id = "radioGroup">
<div class = "myRadioStyle">
<input type = "radio" name = "navbar_menu_store" id = "input_description" class = "radio_item_menu">
<label for = "input_description" class = "label_item_menu">Description</label>
</div>
<div class = "myRadioStyle">
<input type = "radio" name = "navbar_menu_store" id = "input_shipping" class = "radio_item_menu">
<label for = "input_shipping" class = "label_item_menu">Shipping</label>
</div>
</div>
<div id = "contentDescription">
<p class = "testo_scheda">This is some text</p>
</div>
<div id = "contentShipping">
<p class = "testo_scheda">This is some other text</p>
</div>
Добро пожаловать в СО. Если это возможно, вы можете создать рабочий фрагмент, чтобы пользователи оставались здесь и им не приходилось беспокоиться о нарушении сторонних ссылок. Когда вы добавляете свой вопрос, в текстовом поле появляется значок панели инструментов
<>, который открывает редактор фрагментов. На этот раз я добавил ваш код.