Горизонтальные табы

Сегодня мы сделаем адаптивные вкладки для сайта, так называемые табы. Сначала используя jQuery, затем нативный JavaScript.

В HTML-файле создадим структуру будущих табов: обёртку для табов — mywrap-tabs, сами вкладки — mytabs (активный таб и неактивный), и содержимое вкладок — mycontent (так же активное и неактивное содержимое в зависимости от выбранной вкладки).

<div id="mywrap-tabs" class="mywrap-tabs">
    <div class="mytabs">
        <div class="mytab active">CSS</div>
        <div class="mytab">SASS</div>
    </div>
    <div class="mytabs"></div>
    <div class="mycontent">
        <div class="mytab-content active">
            1
        </div>
        <div class="mytab-content">
            2
        </div>
    </div>
</div>

Стилизация табов в css-файле.

.mywrap-tabs {
    max-width: 100%;
    margin: 38px auto;
    font-family: sans-serif;
}

.mywrap-tabs .mytabs {
    background-color: #262938;
}

.mywrap-tabs .mytabs:first-child {
    padding: 7px;
}

.mywrap-tabs .mytabs::after {
    content: "";
    height: 0;
    display: block;
    clear: both;
}

.mywrap-tabs .mytabs .mytab {
    float: left;
    border-top: 4px solid #53798f;
    padding: 9px 19px;
    background-color: #375566;
    color: #fafaf1;
    transition: background-color .25s linear;
    cursor: pointer;
}

.mywrap-tabs .mytabs .mytab:hover {
    background-color: #304c5c;
    color: #fafaf1;
}

.mywrap-tabs .mytabs .mytab.active {
    background-color: #213c4b;
    color: #fafaf1;
    border-top: 4px solid transparent;
}

.mywrap-tabs .mycontent {
    color: #fafaf1;
    background-color: #213c4b;
    padding: 6px 11px;
}

.mywrap-tabs .mycontent .mytab-content {
    display: none;
    padding: 14px 9px;
}

.mywrap-tabs .mycontent .mytab-content.active {
    display: block;
}

И главная магия в js-файле с помощью jQuery.

$(() => {
    $("#mywrap-tabs").on("click", ".mytab", function () {
        const tabs = $("#mywrap-tabs .mytab"),
              tabContent = $("#mywrap-tabs .mytab-content");

        //Удаляем классы active
        tabs.removeClass("active");
        tabContent.removeClass("active");

        //Добавляем классы active
        $(this).addClass("active");
        tabContent.eq($(this).index()).addClass("active");

        return false;
    });
});

Горизонтальные табы — нативный JavaScript

Данный код можно использовать для множества табов. Передайте следующие аргументы в функцию tabs:

  • headerSelector — класс обёртки для кнопок табов;
  • tabSelector — класс кнопок табов;
  • contentSelector — класс контента табов;
  • activeClass — класс выделения автивного таба (без точки «.»);
  • display — block, flex, span и т.п. (если не передан параметр, то block);
window.addEventListener("DOMContentLoaded", () => {

    const tabs = (headerSelector, tabSelector, contentSelector, activeClass, display = "block") => {
        const header = document.querySelector(headerSelector),
            tab = document.querySelectorAll(tabSelector),
            content = document.querySelectorAll(contentSelector);

        function hideTabContent() {
            content.forEach(item => {
                item.style.display = "none";
            });

            tab.forEach(item => {
                item.classList.remove(activeClass);
            });
        }

        // при запуске функции без аргументов активным будет 1 элемент

        function showTabContent(i = 0) {
            content[i].style.display = display;
            tab[i].classList.add(activeClass);
        }

        hideTabContent();
        showTabContent();

        header.addEventListener("click", (e) => {
            const target = e.target;
            if (target &&
                (target.classList.contains(tabSelector.replace(/./, "")) ||
                    target.parentNode.classList.contains(tabSelector.replace(/./, "")))) {
                tab.forEach((item, i) => {
                    if (target == item || target.parentNode == item) {
                        hideTabContent();
                        showTabContent(i);
                    }
                });
            }
        });
    };

    tabs(".mytabs", ".mytab", ".mytab-content", "active");
});
CSS анимация Временная шкала Windows 10