0

Есть самые обычные табы

// ========== Переменные для "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 я уже мог по этому классу как-то видоизменять активную ссылку

1 ответ 1

0

Как вариант...

const header = document.querySelector('.blog__items');
const main = document.querySelector('.blog__contents');
document.querySelector('.blog__items').addEventListener('click', e => {
  const o = e.target.closest('.blog__item')
  header.querySelector('.blog__item--active').classList.remove('blog__item--active')
  main.querySelectorAll('.blog__content').forEach(o => o.classList.add('blog__content--none'))
  const content = document.querySelector('#' + o.dataset.tab);
  content.classList.remove('blog__content--none')
  o.classList.add('blog__item--active')
})
.blog__content--none {
  display: none;
}

.blog__item {
  cursor: pointer;
}
.blog__item--active {
  color: red;
}
<div class="blog__tabs">
  <div class="blog__items">
<div data-tab="tab-1" class="blog__item blog__item--active">
  <h1>первый</h1>
</div>
<div data-tab="tab-2" class="blog__item">
  <h1>второй</h1>
</div>
<div data-tab="tab-3" class="blog__item">
  <h1>третий</h1>
</div>
  </div>
  <div class="blog__contents">
<div id="tab-1" class="blog__content">
  1. 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">
  2. 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">
  3. 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>

4
  • Почему когда я во внутрь blog__item помещаю просто текст все работает но от когда я помещаю тот же текст в h1 или в какой-то другой тег все перестает работать сначала обновляю все как надо нажимаю на какую-то другую вкладку контент пропадает и нету не какой активной вкладки просто остаются blog__item з контентом который я в него поместил
    – Женя
    Commented 25 дек. 2022 в 13:47
  • Имеет смысл создать еще один вопрос с новым html и старым скриптом - тогда будет более понятна проблема. Мой пример рассчитан именно на тот html, что ты показал.
    – ksa
    Commented 25 дек. 2022 в 14:52
  • @Женя, угадал я или нет... Подправил свой пример. Добавил h1 внутрь "табов" и добавил метод в скрипт.
    – ksa
    Commented 25 дек. 2022 в 18:09
  • Я уже решил проблему все работает как надо
    – Женя
    Commented 26 дек. 2022 в 18:10

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.