prrrrrrr
@prrrrrrr

Как сделать переключение div-ов по клику?

Подскажите, как сделать переключение div-ов по клику? То есть чтобы изначально был виден один, а при клике на ссылку — первый прятался (может по типу display:none), а второй включался на его месте

К примеру:
<div class="one" style="display:block;">Hello</div>
<div class="two" style="display:none;">Hi</div>

<a>Переключить</a>

и наоборот
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
@BRAGA96
(function () {
    'use strict';

    var selector = {
        $button: document.querySelector('a'),
        $one: document.querySelector('.one'),
        $two: document.querySelector('.two')
    };

    selector.$button.addEventListener('click', function (event) {
        event.preventDefault();
        if (isHidden(selector.$one)) {
            changeDisplay(selector.$one, 'block');
            changeDisplay(selector.$two, 'none');
        } else {
            changeDisplay(selector.$one, 'none');
            changeDisplay(selector.$two, 'block');
        }
    });

    function changeDisplay($node, value) {
        $node.style.display = value;
        return $node;
    }

    function isHidden($node) {
        return window.getComputedStyle($node).display === 'none';
    }

}());
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@lb-web
Тут шок контент предлагают.
https://codepen.io/anon/pen/EGEZYY
на jquery
в 2 строчки.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы