Module «tabs». Переключение табов

Демо:

https://codepen.io/ildar-meyker/pen/yLRQpgB?editors=1111

Плагины:

Подключение:

//

Разметка:

//

<nav class="nav-titles js-tabs">
    <ul>
        <li class="active">
            <a href="#tab-search-1">Применяемость</a>
        </li>
        <li><a href="#tab-search-2">ОЕМ номер</a></li>
    </ul>
</nav>


<div class="tabs-content">
   <div class='active' id="#tab-search-1">lorem 1</div>
   <div id="#tab-search-2">lorem 2</div>
</div>

Стили:

// tabs-content.scss
.tabs-content {
    > div {
        display: none;

        &.active {
            display: block;
        }
    }
}

Инициализация:

// modules/tabs.js

const setActiveButton = ($tabs, index) => {
    $tabs.find("li").removeClass("active").eq(index).addClass("active");
};

const setActiveContent = (id) => {
    $(id).siblings().removeClass("active").end().addClass("active");
};

function handleTabClick(e) {
    e.preventDefault();

    const index = $(this).parent().index();
    setActiveButton($(this).closest(".js-tabs"), index);
    setActiveContent($(this).attr("href"));
}

$(function () {
    $(document).on("click", ".js-tabs a", handleTabClick);
});