0

подскажите пожалуйста, как правильно добавить класс блоку. есть иконка1 с классом "click_link", при нажатии на которую у нее появляется класс "active". нужно сделать так чтобы при нажатии на эту иконку, если у нее есть класс active, то блоку c классом "col-lg-3 col-md-4 col-sm-5 col-sm-offset-0 col-xs-11 col-xs-offset-1 open" присваивался тоже класс active. потом при нажатии на другую иконку у иконки1 исчезает класс active и у блока тоже исчезал класс active. пытался так, но что то не работает как надо. `var element = document.querySelector('.click_link'); var block = document.querySelector('.open');

var element = document.querySelector('.click_link');
var block = document.querySelector('.open');

element.onclick() = function() {
    if (element.classList.contains("active"))
        block.classList.toggle('.active');
    else block.classList.remove('.active');
}

введите сюда описание изображения

1
  • Не по теме: лучше использовать element.addEventListener('click',handle) вместо element.onclick()
    – Greg--
    2 июл 2021 в 13:46

1 ответ 1

0

const elements = document.querySelectorAll('.click_link');
const block = document.querySelector('.open');

elements.forEach((element) =>
{
    element.addEventListener('click', (event) =>
    {
        const isActive = event.target.classList.contains('active');

        block.classList.toggle('active', isActive);
    });
});
.click_link
{
  display: block;
}

.open
{
  display: none;
}

.open.active
{
  display: block;
}
<button class="click_link">icon 1</button>
<button class="click_link active">icon 2 (с классом active)</button>
<button class="click_link">icon 3</button>

<div class="open">
  Block
</div>

18
  • не совсем корректно такой код работает. я уже пробовал такой вариант только в другом исполнении. получается один раз на иконку кликаешь у блока появляется класс active. и пока снова не кликнешь на эту же иконку он не исчезает. а надо кликнул на иконку с данным классом у блока появился класс у блока, кликнул на другую иконку у блока удалился класс active 2 июл 2021 в 11:56
  • наверное здесь двойную проверку сделать надо 2 июл 2021 в 11:57
  • Честно, не совсем тогда понимаю задачу. Получается "кнопки" по которым нужно кликать - их две? И одна добавляет класс, другая убирает? 2 июл 2021 в 11:57
  • Или.. Если у кнопки если есть класс, то у блока переключается состояние. А если нет класса, то всегда уляется? 2 июл 2021 в 12:01
  • их несколько. типа вкладки. так вот по клик по нужной добавляет класс к блоку, клик по другим убирает у блока класс. дело в том что этот блок с классом выше я указал, нужно скрыть мне. именно только при нажатии на нужную иконку. во всех остальных случаях блок должен быть видимым 2 июл 2021 в 12:02

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.