@aeprotsyuk

Как сделать появление картинки на элементе после его посещения?

Добрый день!
Есть табы, после посещения вкладки она остается зеленой и появляется картинка с галочкой к круге. Как это можно реализовать? Табы сделаны на списке.
607550f557235288164858.png
<!-- Общий контейнер для табов -->
        <div class="tabs">

            <!--  Контейнер с вкладками   -->
            <ul class="tab-header">
                <li class="tab-header__item js-tab-trigger active" data-tab="1">Качество</li>
                <li class="tab-header__item js-tab-trigger" data-tab="2">Ответственность</li>
                <li class="tab-header__item js-tab-trigger" data-tab="3">Взаимовыгодность</li>
                <li class="tab-header__item js-tab-trigger" data-tab="4">Эффективность</li>
                <li class="tab-header__item js-tab-trigger" data-tab="5">Свобода</li>
            </ul>

            <!--  Контейнер с блоками, которые содержат контент вкладок   -->
            <ul class="tab-content">
                <li class="tab-content__item js-tab-content active" data-tab="1">
                    Безопасность, отражающаяся в благополучии сотрудников – яркий пример Взаимовыгодности

                </li>
                <li class="tab-content__item js-tab-content" data-tab="2">
                    Содержимое второй вкладки
                </li>
                <li class="tab-content__item js-tab-content" data-tab="3">
                    Содержимое третьей вкладки
                </li>
                <li class="tab-content__item js-tab-content" data-tab="4">
                    Содержимое четвертой вкладки
                </li>
                <li class="tab-content__item js-tab-content" data-tab="5">
                    Содержимое пятой вкладки
                </li>
            </ul>
        </div>

    </div>
    <!-- /.slide1 -->


function tabsInit() {
    var jsTriggers = document.querySelectorAll('.js-tab-trigger'),
        jsContents = document.querySelectorAll('.js-tab-content');

    jsTriggers.forEach(function (trigger) {
        trigger.addEventListener('click', function () {
            var id = this.getAttribute('data-tab'),
                content = document.querySelector('.js-tab-content[data-tab="' + id + '"]'),
                activeTrigger = document.querySelector('.js-tab-trigger.active'),
                activeContent = document.querySelector('.js-tab-content.active');

            activeTrigger.classList.remove('active');
            trigger.classList.add('active');

            activeContent.classList.remove('active');
            content.classList.add('active');
        });
    });
}
  • Вопрос задан
  • 46 просмотров
Пригласить эксперта
Ответы на вопрос 1
v3shin
@v3shin
Веб-шаман
Разнести изменение фона и появление галочки по разным классам.
При клике на таб убирать с активного таба класс с галочкой; кликнутому табу добавлять оба класса.
Ответ написан
Ваш ответ на вопрос

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

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