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

santavits @santavits

html

HTML

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

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

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

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

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

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

Решения вопроса 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

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

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

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

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

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

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

HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 12 часов назад
- 28 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- 13 часов назад
- 89 просмотров
0

ответов
HTML

+1 ещё

Простой
Как разместить елементы с разных блоков чтобы они перекрывали друг друга?
- 1 подписчик
- 16 часов назад
- 46 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 39 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 101 просмотр
1

ответ
JavaScript

+3 ещё

Средний
Как сделать слайдер на swiper, в котором активный слайд всегда крайний слева?
- 1 подписчик
- 19 нояб.
- 111 просмотров
1

ответ
HTML

+1 ещё

Простой
Как сделать метку/ярлык?
- 1 подписчик
- 18 нояб.
- 42 просмотра
0

ответов
PHP

+2 ещё

Простой
Как можно отредактировать микроразметку сайта написанного на Bootstrap?
- 1 подписчик
- 17 нояб.
- 225 просмотров
3

ответа
HTML

+1 ещё

Простой
Как сделать так, чтобы при нажатии не исчезало?
- 1 подписчик
- 16 нояб.
- 135 просмотров
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Тестирование модуля ElasticSearch через ftp

22 нояб. 2024, в 03:54

1500 руб./за проект

Телеграм бот

22 нояб. 2024, в 02:56

10000 руб./за проект

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

22 нояб. 2024, в 00:55

500 руб./за проект