Есть самые обычные табы
// ========== Переменные для "tabo'v" ==========
const headerItem = document.querySelectorAll('.blog__item');
const mainContent = document.querySelectorAll('.blog__content');
// Перебираем все заголовки табов
for (let item of headerItem) {
// Вешаем на них click
item.addEventListener('click', function() {
// Добавляем всем blog__content класс blog__content--none, который скрывает содержимое!
for (let element of mainContent) {
element.classList.add('blog__content--none')
}
// Находим конкретный blog__content, который соответствует нажатому заголовку табов
// и удаляем у него класс blog__content--none, чтобы показать содержимое!
const content = document.querySelector('#' + item.dataset.tab);
content.classList.remove('blog__content--none')
})
}
.blog__content--none {
display: none;
}
<div class="blog__tabs">
<div class="blog__items">
<div data-tab="tab-1" class="blog__item">
первый
</div>
<div data-tab="tab-2" class="blog__item">
второй
</div>
<div data-tab="tab-3" class="blog__item">
третий
</div>
</div>
<div class="blog__contents">
<div id="tab-1" class="blog__content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus neque iusto eveniet dignissimos, sequi veritatis.
</div>
<div id="tab-2" class="blog__content blog__content--none">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore omnis quia illum blanditiis corrupti voluptate, nemo, provident enim vero deleniti distinctio expedita a ullam harum est nobis odit. Dolorem quod, itaque officiis tempora expedita temporibus corporis praesentium nulla reiciendis magni.
</div>
<div id="tab-3" class="blog__content blog__content--none">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet officiis odio sapiente repellendus possimus rerum dolorem quam unde, similique maxime, nihil at? Eius, natus tempore, maxime consequatur optio laboriosam in a aliquid, ullam aperiam iure ea qui mollitia, libero provident. Voluptates hic voluptatibus dolore non quidem facere, sequi esse eligendi nam vitae maxime eaque quaerat et quam consequatur dolorum nemo, odio, explicabo provident sed perspiciatis at dolor. Animi corrupti laudantium id facilis quasi enim maiores beatae ab doloribus, voluptatum qui quas nesciunt, veniam facere natus, itaque. Velit consequuntur nobis, voluptates aperiam neque soluta placeat rerum, quod nisi dolore perferendis harum!
</div>
</div>
Нужно чтобы когда пользователь находился к примеру на первой вкладке то самой ссылке добавлялся класс "blog__item--active" и дальше в css я уже мог по этому классу как-то видоизменять активную ссылку