Задать вопрос

santavits @santavits

html

HTML

Как сделать чтобы в зависимости от выбранного переключателя менялся блок div?

Есть задача сделать 4 радио баттона, и при нажатие на один из них открывался нужный мне блок div

Что то наподобие этого

Вопрос задан более трёх лет назад
305 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

Решения вопроса 1

Алекс @pilolin

HTML программист

Что то такое? переключатель

Ответ написан более трёх лет назад

2 комментария

2 комментария

santavits @santavits Автор вопроса

Видимо настолько судьба моя плоха, что даже если просто скопировать вставить, у меня не получается

<html>
<head>
<title>dsgsg</title>
</head>
<body>
<form action="">
  <p><input name="radiobutton" type="radio" value="1" checked>1</p>
  <p><input name="radiobutton" type="radio" value="2">2</p>
  <p><input name="radiobutton" type="radio" value="3">3</p>
</form>

<div class="container">
  <div class="block active" data-id="1">1</div>
  <div class="block" data-id="2">2</div>
  <div class="block" data-id="3">3</div>
</div>
<style>
.block {
  display: none;
  width: 50px;
  height: 50px;
  border: 1px  solid red;
  text-align: center;
  line-height: 50px;
}

.block.active {
  display: block;
}
</style>
<script>
$('form').on('click', 'input[type="radio"]', function(e) {
	$('.block').removeClass('active');
  $('.block[data-id="' + e.target.value + '"]').addClass('active');
})
</script>
</body>
</html>

Вот код всего файла, всегда показывается активный первый блок, в чём же может быть ошибка?)

Написано более трёх лет назад

santavits @santavits Автор вопроса

Проблему сам нашёл, не была подключена библеотека jquery)
Спасибо)

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

webinar

Максим Тимофеев @webinar

Учим yii: https://youtu.be/-WRMlGHLgRg

Менять css свойства по событию выбора:
jsfiddle.net/tbqNd/800

Ответ написан более трёх лет назад

Комментировать

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- 05 нояб.
- 119 просмотров
0

ответов
PHP

+2 ещё

Простой
Создание элемента с необычной формой и прозрачным фоном и рамкой?
- 1 подписчик
- 03 нояб.
- 138 просмотров
0

ответов
HTML

Простой
При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?
- 1 подписчик
- 29 окт.
- 166 просмотров
0

ответов
HTML

+1 ещё

Простой
Как создать карточки в рядах со смещением?
- 1 подписчик
- 28 окт.
- 113 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в руководстве steam сделать обтекающий картинку текст?
- 1 подписчик
- 08 окт.
- 135 просмотров
1

ответ
HTML

+1 ещё

Средний
Скачал плагин image preview в вс коде, чтобы установить иконку сайта. Иконка появилась в браузере, но не появилась слева напротив строки. Почему так?
- 1 подписчик
- 30 сент.
- 155 просмотров
1

ответ
HTML

+1 ещё

Простой
От какой технической характеристики компьютера зависит скорость работы сайта, указанного ниже?
- 1 подписчик
- 24 сент.
- 470 просмотров
2

ответа
HTML

+1 ещё

Простой
Как убрать линии у бейджиков в Markdown?
- 1 подписчик
- 23 сент.
- 210 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как менять картинки у карточки в списке товаров?
- 4 подписчика
- 22 сент.
- 362 просмотра
1

ответ
HTML

+1 ещё

Средний
Как правильно сочетать теги article, section и заголовки h1-h6?
- 2 подписчика
- 21 сент.
- 250 просмотров
2

ответа
Показать ещё Загружается…

PHP-разработчик

FoodSoul • Калининград

от 180 000 до 250 000 ₽

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Frontend Developer (React + Node.js)

Alfabet Service

от 1 000 до 2 000 $