0

Всем привет.

Необходимо реализовать меню на сайте через табы.

В принципе нашел то что подойдет вот тут https://frontips.ru/variant-adaptivnyh-vkladok-tabs-na-javascript/

Но мне не нужно чтобы была изначально активная хоть какая то вкладка.

Как сделать чтобы изначально открытой вкладки с контентом не было?

Пробовал удалять ту часть кода, которая отвечает за установку активной по умолчанию и код ломается.

Подскажите пожалуйста. Вот код прилагаю, кто переходить не хочет по ссылке

document.addEventListener('DOMContentLoaded', () => { // Структура страницы загружена и готова к взаимодействию

  const tabs = () => { // объявляем основную функцию для вкладок, чтобы вся логика была в одном месте
    const head = document.querySelector('.tabs__head') // ищем элемент с кнопками и записываем в константу
    const body = document.querySelector('.tabs__body') // ищем элемент с контентом и записываем в константу

    const getActiveTabName = () => { // объявляем функцию для получения названия активной вкладки
      return head.querySelector('.tabs__caption_active').dataset.tab // возвращаем значение data-tab активной кнопки
    }

    const setActiveContent = () => { // объявляем функцию для установки активного элемента контента
      if (body.querySelector('.tabs__content_active')) { // если уже есть активный элемент контента
        body.querySelector('.tabs__content_active').classList.remove('tabs__content_active') // то скрываем его
      }
      body.querySelector(`[data-tab=${getActiveTabName()}]`).classList.add('tabs__content_active') // затем ищем элемент контента, у которого значение data-tab совпадает со значением data-tab активной кнопки и отображаем его
    }

    // проверяем при загрузке страницы, есть ли активная вкладка
    if (!head.querySelector('.tabs__caption_active')) {  // если активной вкладки нет
      head.querySelector('.tabs__caption').classList.add('tabs__caption_active') // то делаем активной по-умолчанию первую вкладку
    }

    setActiveContent(getActiveTabName()) // устанавливаем активный элемент контента в соответствии с активной кнопкой при загрузке страницы

    head.addEventListener('click', e => { // при клике на .tabs__head
      const caption = e.target.closest('.tabs__caption') // узнаем, был ли клик на кнопке
      if (!caption) return // если клик был не на кнопке, то прерываем выполнение функции
      if (caption.classList.contains('tabs__caption_active')) return // если клик был на активной кнопке, то тоже прерываем выполнение функции и ничего не делаем

      if (head.querySelector('.tabs__caption_active')) { // если уже есть активная кнопка
        head.querySelector('.tabs__caption_active').classList.remove('tabs__caption_active') // то удаляем ей активный класс
      }

      caption.classList.add('tabs__caption_active') // затем добавляем активный класс кнопке, на которой был клик

      setActiveContent(getActiveTabName()) // устанавливаем активный элемент контента в соответствии с активной кнопкой
    })
  }

  tabs() // вызываем основную функцию

})
body {
  background: #121212;
}
.container {
  max-width: 1140px;
  padding: 0 30px;
  margin: 0 auto;
}
.tabs {
  overflow: hidden;
  border-radius: 15px;
}
.tabs__head {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}
.tabs__caption {
  flex: 1;
  text-align: center;
  text-transform: uppercase;
  padding: 8px 30px;
  font-size: 18px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--color);
  opacity: 0.6;
  background: var(--primary);
  transition: 0.25s;
}
.tabs__caption:hover {
  opacity: 0.8;
}
.tabs__caption_active {
  opacity: 1;
  background: var(--primary);
}
.tabs__body {
  background: var(--primary);
  position: relative;
  top: -2px;
  transition: 0.25s;
}
.tabs__content {
  display: none;
  padding: 30px;
  color: var(--color);
  transform: scaleY(0.8);
  opacity: 0;
  transform-origin: center top;
  -webkit-animation: showContent 0.6s forwards;
  animation: showContent 0.6s forwards;
}
.tabs__content_active {
  display: block;
}
.section {
  --primary: #3fa7d6;
  --color: #fff;
  padding: 15px 0;
}
.about {
  padding: 15px 0;
  --primary: #8cff98;
  --color: #121212;
}
@-webkit-keyframes showContent {
  0% {
    transform: scaleY(0.8);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}
@keyframes showContent {
  0% {
    transform: scaleY(0.8);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Tabs</title>
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
    <link rel="stylesheet" href="css/main.css"/>
  </head>
  <body>
    <section class="section">
      <div class="container">
        <div class="section__tabs tabs">
          <div class="tabs__head">
            <div class="tabs__caption" data-tab="home">Home</div>
            <div class="tabs__caption" data-tab="portfolio">Portfolio</div>
            <div class="tabs__caption" data-tab="about">About</div>
          </div>
          <div class="tabs__body">
            <div class="tabs__content" data-tab="home">Home lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia sit, repellat assumenda excepturi minima debitis atque nulla quibusdam iste eligendi voluptas, obcaecati nihil necessitatibus vel illum itaque ea molestias vero! Home lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia sit, repellat assumenda excepturi minima debitis atque nulla quibusdam iste eligendi voluptas, obcaecati nihil necessitatibus vel illum itaque ea molestias vero!</div>
            <div class="tabs__content" data-tab="portfolio">Portfolio lorem ipsum dolor sit amet, consectetur adipisicing elit. Id magni sit, enim tenetur animi eius ea, similique optio nostrum quibusdam ex, dolores dolorem. Recusandae quo molestiae modi saepe ratione numquam!</div>
            <div class="tabs__content" data-tab="about">About lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia quibusdam nemo qui numquam magnam! In sunt, ut cum nulla, accusantium mollitia et illum voluptate repudiandae! Magnam alias, iure saepe animi.</div>
          </div>
        </div>
      </div>
    </section>
    <script src="js/main.js"></script>
  </body>
</html>

1 ответ 1

0

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

.show {
   display: block;
}

.active {
   opacity: 0.8;
}


const tabsBtn = document.querySelectorAll('.tabs__caption');
const tabsContent = document.querySelectorAll('.tabs__content');

function hideTabs() {
  tabsContent.forEach((tab) => {
    tab.classList.remove('show');
  });
}

function showTab(i) {
  tabsContent[i].classList.add('show');
}

tabsBtn.forEach((btn, i) => {
  btn.addEventListener('click', () => {
    if (tabsBtn[i].classList.contains('active')) {
      tabsBtn[i].classList.remove('active');
      tabsContent[i].classList.remove('show');
    } else {
      hideTabs();
      showTab(i);

      tabsBtn.forEach((btn) => {
        btn.classList.remove('active');
      });
      tabsBtn[i].classList.add('active');
    }
  });
});
12
  • Да, отлично. Только бы еще по клику когда таб активен он скрывался и становился неактивным... Помогите если не сложно
    – Denis
    Commented 17 февр. 2023 в 11:03
  • И да, тут получается в вашем коде активный не отследить, чтобы на него стили повесить и выделить как то..
    – Denis
    Commented 17 февр. 2023 в 11:05
  • Вы можете так же дополнить стили, я лишь привел пример как это можно реализовать, а добавить классов можно добавить сколько угодно, с любыми стилями.
    – Elmir
    Commented 17 февр. 2023 в 11:07
  • Спасибо большое. Очень помогли
    – Denis
    Commented 17 февр. 2023 в 11:20
  • Кстати, в приведенном примере не получится как я понимаю добавить и удалить класс. Скрипт ведь не понимает где и что ему искать. Переменной не задано. Если я ему в showTab задаю добавление или удаление класса, то он просто ругается и говорит что не может этого сделать
    – Denis
    Commented 17 февр. 2023 в 11:43

Ваш ответ

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

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