Показать или скрыть div на основе выбранного значения

html5 css3

1249 просмотра

2 ответа

28 Репутация автора

У меня есть несколько блоков, которые я хочу видеть в зависимости от выбранной опции.

div {
  display: none;
}
select[value="test1"] #targ1 {
  display: block;
}
select[value="test2"] #targ2 {
  display: block;
}
select[value="test3"] #targ3 {
  display: block;
}
Dropdown list:
<select name="Dropdown" id="select">
  <option value="test1">Test a</option>
  <option value="test2">Test b</option>
  <option value="test3">Test c</option>
</select>

<div id="targ1">Test 1</div>
<div id="targ2">Test 2</div>
<div id="targ3">Test 3</div>

Я также пробовал другие селекторы, такие как select[selected] ~ divили option:focus #targ1.

Я даже пытался добавить ::afterпсевдоэлемент к selectэлементу, но элементы divвнутри optionтега игнорируются или ведут себя странно. Похоже , что selectи optionметки имеют вид своих собственных правил , которые я не нашел на W3Schools.

Как я могу показать и скрыть divэлементы, основанные на текущем выбранном, optionиспользуя только HTML и CSS?

Автор: Eugene Источник Размещён: 18.07.2016 06:24

Ответы (2)


3 плюса

4091 Репутация автора

Плохие новости

Чтобы определить, какая опция в настоящее время выбрана с помощью CSS, вам нужно применить :checkedпсевдокласс к optionэлементу, а не к selectэлементу. См. Вопрос « CSS: выбранный псевдокласс похож на: проверено, но для элементов » для получения дополнительной информации.

option:checked {
  font-weight: bold;
}
<select>
  <option>Choice 1</option>
  <option>Choice 2</option>
</select>

Объединение этого с CSS-комбинаторами ( соседний селектор брата+ , общий селектор брата~ , дочерний селектор> и селектор потомка ) разочаровывающе неэффективно. Комбинаторы могут быть объединены , чтобы выбрать любой родственный или потомка, но никогда не может выбрать один из родителей или двоюродного брата ... и так как HTML спецификации для в selectэлемент говорит , что его допустимое содержание является «ноль или более optionили optgroupэлементы», вы просто не можете воздействуйте на элемент div, используя значение элемента select только с помощью CSS.

Использование раскрывающегося списка с JavaScript

Пример ниже отслеживает изменения элемента select. Когда происходит изменение, он захватывает вновь выбранный элемент option и считывает цели для этой опции из атрибута данных (это очень удобно, поскольку позволяет указывать цели фильтра прямо в HTML - таким образом, сохраняя вашу модель и логика управления раздельная). Затем он проходит все действительные цели и либо добавляет, либо удаляет .hiddenкласс в зависимости от того, находится ли эта цель в списке, предоставленном атрибутом данных.

var filter = document.getElementById('filter');

filter.addEventListener('change', function() {
  var option = this.options[this.selectedIndex];
  var targets = option.dataset.targets.split(/(\s+)/);
  for (var target of document.getElementsByClassName('target')) {
    if (targets.indexOf(target.id) >= 0)
      target.classList.remove('hidden');
    else
      target.classList.add('hidden');
  }
});
.target {
  display: block;
}

.target.hidden {
  display: none;
}
<select id="filter">
  <option data-targets="">Show no targets</option>
  <option data-targets="t1">Show target 1</option>
  <option data-targets="t2">Show target 2</option>
  <option data-targets="t1 t2">Show targets 1 and 2</option>
</select>

<div class="target hidden" id="t1">Thsi is the first target.</div>
<div class="target hidden" id="t2">This is the second target.</div>

Использование переключателей без JavaScript

В отличие от выпадающих элементов, переключатели не обязательно должны быть вложены в элемент обтекания. Из-за этого вы можете структурировать свой HTML так, чтобы divэлементы были общими элементами радио-кнопок, и вы можете использовать :checkedкласс, чтобы влиять на их видимость.

.target {
  display: none;
}

#f1:checked ~ #t1 {
  display: block;
}

#f2:checked ~ #t2 {
  display: block;
}

#f3:checked ~ #t1,
#f3:checked ~ #t2 {
  display: block;
}
<input type="radio" name="filter" id="f0" checked><label for="f0">Show no targets</label><br>
<input type="radio" name="filter" id="f1"><label for="f1">Show target 1</label><br>
<input type="radio" name="filter" id="f2"><label for="f2">Show target 2</label><br>
<input type="radio" name="filter" id="f3"><label for="f3">Show targets 1 and 2</label>

<div class="target" id="t1">This is the first target.</div>
<div class="target" id="t2">This is the second target.</div>

Автор: Woodrow Barlow Размещён: 18.07.2016 07:06

0 плюса

28 Репутация автора

Решение

Через некоторое время подумав и нахмурившись ... я получил довольно интересный результат:

<!DOCTYPE html>
<html>
<style>

#marks {
	width: 30px; height: 30px; margin: 0;
	border: 1px solid gray;
	cursor: pointer;
}

#marks_container {
	width: 50px; height: 0px; z-index: 10; overflow: hidden;
	background-color: lightgray;
	position: relative; top: 40px; left: 5px;
}
#marks:focus > #marks_container, #marks_container:hover {
	height: 100px;
}

#item1 {
	background-color: red;
}
#item2 {
	background-color: green;
}
#item3 {
	background-color: blue;
}

.visible {
	width: 150px; height: 150px;
	position: absolute; left: 0px; top: 100px;
	opacity: 0;
}
.visible:focus {
	opacity: 1;
}

</style>
<body>

<div id="marks" tabindex="0">
	<div id="marks_container">
		<a href="#item1" class="b_lnk">item1</a>
		<a href="#item2" class="b_lnk">item2</a>
		<a href="#item3" class="b_lnk">item3</a>
	</div>
</div>

<div tabindex="0" class="visible" id="item1"></div>
<div tabindex="0" class="visible" id="item2"></div>
<div tabindex="0" class="visible" id="item3"></div>
</body>
</html>

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

Кстати, код был извлечен из файла тестирования, где происходит много всего, если части кода являются дополнительными - просто игнорируйте их :)

Автор: Eugene Размещён: 05.08.2016 01:05
Вопросы из категории :
32x32