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

Question

[aeprotsyuk]

Добрый день!
Есть табы, после посещения вкладки она остается зеленой и появляется картинка с галочкой к круге. Как это можно реализовать? Табы сделаны на списке.

<!-- Общий контейнер для табов -->
        <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');
        });
    });
}

Comments

[Lord_Dantes]

А в чем проблема то, или что вы имеет ввиду под "посещением" это активный таб или вы хотите отслеживать пользователя посетил ли он этот таб?

Answer 1

[v3shin]

Разнести изменение фона и появление галочки по разным классам.
При клике на таб убирать с активного таба класс с галочкой; кликнутому табу добавлять оба класса.