Как сделать так, чтобы при нажатии на кнопку ей добавлялся класс c помощью js или Jquery?
При нажатии на кнопку нужно добавить ей класс Active.
Буду очень благодарен.
<div class="budget-but1" id="btnbudmain"> <button class="btn-bud">Менее 250.000</button> <button class="btn-bud2">Около 500.000</button> <button class="btn-bud">Около 1 млн</button> <button class="btn-bud3">1-3 млн</button> </div> |
<div class="budget-but1" id="btnbudmain"> <button class="btn-bud">Менее 250.000</button> <button class="btn-bud2">Около 500.000</button> <button class="btn-bud">Около 1 млн</button> <button class="btn-bud3">1-3 млн</button> </div>
.btn-bud{ width: 425px; height: 102px; border-radius: 40px; font-size: 42px; background-color: white; } .btn-bud2{ width: 425px; height: 102px; border-radius: 40px; font-size: 42px; background-color: white; margin-left: 12px; margin-right: 70px; } .btn-bud3{ width: 425px; height: 102px; border-radius: 40px; font-size: 42px; background-color: white; margin-left: 12px; } .active{ background-color: #121212; color: white; transition-duration: 133ms; transition-timing-function: cubic-bezier(0.33, 0, 0.67, 1); transition-delay: 0s; transition-property: background-color; } |
.btn-bud{ width: 425px; height: 102px; border-radius: 40px; font-size: 42px; background-color: white; } .btn-bud2{ width: 425px; height: 102px; border-radius: 40px; font-size: 42px; background-color: white; margin-left: 12px; margin-right: 70px; } .btn-bud3{ width: 425px; height: 102px; border-radius: 40px; font-size: 42px; background-color: white; margin-left: 12px; } .active{ background-color: #121212; color: white; transition-duration: 133ms; transition-timing-function: cubic-bezier(0.33, 0, 0.67, 1); transition-delay: 0s; transition-property: background-color; }
Дополнительно:
А мы будем все Вам благодарны если Вы
1) Научитесь гуглить
2) Будете соблюдать правила сервиса.
См.п.3.1 Регламента. Также обратите внимание на п.2.2, 3.4, 5.12 Регламента.
Здравствуйте, это действительно кнопки.
Здравствуйте, это действительно не кнопки.
Это группа радио.
Соответственно, цвет у выбранного устанавливается элементарно.
input:checked {backgroud: yellow}
Ответы:
Почитайте про События «click» и addEventListener и event.target.
А еще про циклы типа forEach и то как найти элементы в DOM например querySelectorAll.
Алгоритм примерно такой:
Нужно найти все кнопки (см. querySelectorAll) циклом повесить обработчик событий на каждую кнопку (см. addEventListener) и при событии клика вешать нужный класс на нажатую (см. event.target)
А если хочеца готовое решение, на ютубе масса примеров и гайдов на эту тему. Тема довольно простая на самом деле. Удачи!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы при нажатии на кнопку добавить ей класс с помощью JavaScript или jQuery, можно воспользоваться следующими способами:
1. JavaScript:
```html
document.getElementById('myButton').addEventListener('click', function() {
this.classList.add('newClass');
});
```
2. jQuery:
```html
$('#myButton').on('click', function() {
$(this).addClass('newClass');
});
```
Оба примера позволят добавить класс "newClass" к кнопке при нажатии на неё. В первом случае используется чистый JavaScript, а во втором - библиотека jQuery, которая упрощает работу с DOM элементами.
Надеюсь, это поможет вам решить вашу проблему. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.