Главная страница » Верстка табов, tabs css

Верстка табов, tabs css

Опубликовал(а): Артём Масальский

Обновлено: 11.03.2024

В данном руководстве «Верстка табов, tabs css» мы изучим процесс создания отзывчивых вкладок с применением CSS и небольшого объема JavaScript. Хотя создание вкладок на чистом CSS также возможно, в данном примере мы использовать JavaScript для разносторонней практики.

Что такое tabs (табы, вкладки)?

Термин «tabs» в контексте вопроса означает вкладки или табуляторы, используемые в веб-дизайне для создания интерфейса, где содержимое разделено на несколько областей. Пользователь может переключаться между этими областями, выбирая нужную вкладку.

На заметку! Такие вкладки позволяют удобно организовывать и представлять информацию.

Верстка табов, tabs css

Разобьем процесс верстки табов, tabs css на несколько этапов для более подробного понимания.

HTML

Давайте начнем с разбора требуемой разметки. У нас есть основной контейнер, который включает в себя вкладки (элементы списка), а также содержимое каждой вкладки (панели вкладок). Для установки связи между вкладкой и соответствующей ей панелью мы используем пользовательский атрибут data-index, содержащий уникальное значение для каждой панели вкладок. Однако из-за индексации, начинающейся с нуля, панель с data-index="0" связана с первой вкладкой, панель с data-index="1" связана со второй и так далее.

Пример HTML-разметки:

<div class="tabs-container">
  <ul class="tabs">
    <li class="active">
      <a href="">Part 1</a>
    </li>
    <li>
      <a href="">Part 2</a>
    </li>
    <li>
      <a href="">Part 3</a>
    </li>
  </ul>
  <div class="tabs-content">
    <div class="tabs-panel active">
      <!-- content here -->
    </div>
    <div class="tabs-panel">
      <!-- content here -->
    </div>
    <div class="tabs-panel">
      <!-- content here -->
    </div>
  </div>
</div>

CSS

Продолжим, указывая несколько CSS-правил для нашего компонента. В этом этапе мы применяем основные стили, без использования каких-либо эффектов перехода (например, fade или slide) при переключении между вкладками. Вместо этого они просто появляются и исчезают с помощью простого переключения on/off.

Пример начальных стилей:

.tabs-container {
  width:700px;
  max-width: 100%;
  margin: 50px auto;
  padding: 25px;
}
.tabs {
  display: flex;
  list-style-type: none;
  border-bottom: 2px solid #000;
}
.tabs li:not(:last-child) {
  margin-right: 5px;
}
.tabs li a {
  display: block;
  position: relative;
  padding: 10px 45px;
  border-radius: 10px 3px 0px 0px;
  background: #444444;
  color:#fff;
  font-weight: 900;
  transition: all 0.1s ease-in-out;
  text-decoration: none;
  pointer-events: none;
}
.tabs li.active a {
  background: #000;
  z-index: 1;
}
.tabs-content {
  position: relative;
  z-index: 2;
  padding: 25px;
  border-radius: 0 4px 4px 4px;
  background: white;
  font-size: 16px;
  line-height: 22px;
}
.tabs-panel {
  display: none;
}
.tabs-panel.active {
  display: block;
}

JavaScript

При каждом клике по вкладке выполняются следующие действия:

Убираем класс «active» с текущей вкладки (по умолчанию первая) и её соответствующей панели (также по умолчанию первая).
Находим родительский элемент «li» этой вкладки, добавляем к нему класс «active», и возвращаем его индекс.
Находим панель вкладок, значение атрибута «data-index» которой соответствует полученному индексу, и присваиваем ей класс «active».

Вот, как выглядит переписанный код на JavaScript:

var tabs = document.querySelectorAll('.tabs li');

tabs.forEach(function(tab) {
  tab.addEventListener('click', function() {
    tabs.forEach(t => t.classList.remove('active'));
    tab.classList.add('active');

    var li_index = Array.from(tab.parentNode.children).indexOf(tab);
    var panels = document.querySelectorAll('.tabs-panel');

    panels.forEach((panel, index) => panel.classList.toggle('active', index === li_index));
  });
});

Добавим адаптивность, чтобы компонент выглядел красиво при ширине окна просмотра до 600 пикселей.

Этот CSS код добавляет медиазапрос, который активируется при ширине окна просмотра 600 пикселей или менее. В этом случае, мы изменяем направление flex-контейнера на столбец и устанавливаем ширину вкладок на 100%, чтобы они занимали всю доступную ширину.

Вот обновленные правила CSS для адаптивности с подходом desktop-first:

@media screen and (max-width: 600px) {
  .tabs { 
    flex-direction: column; 
    padding-left:0;
    border:0;
  } 
  .tabs li { 
    width: 100%; 
  } 
  .tabs li:not(:last-child) { 
    margin-right: 0; 
  } 
  .tabs li a { 
    border-radius: 0; 
    opacity: 1; 
    top: 0; 
    border-bottom:1px solid rgba(255,255,255,.1)
  } 
  .tabs-content { 
    border-radius: 0; 
  } 
}

В результате должно выйти как показано ниже:

Part 1
Part 2
Part 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat massa nec eros porta ullamcorper. Donec sagittis metus eget arcu eleifend porta. Fusce porta risus nec diam pretium bibendum. Praesent id varius eros. Nam ac est sit amet risus congue sodales ut ut enim. Morbi magna augue, fermentum eget ligula a, ullamcorper aliquam orci.

Praesent eget ullamcorper tortor. Quisque tempor dolor sit amet nunc sagittis, nec imperdiet quam viverra. Vestibulum in lobortis neque. Vestibulum convallis cursus nulla, vel sagittis libero hendrerit nec. In in est sit amet nunc hendrerit tempor. Vestibulum sollicitudin ipsum dolor, sed congue tortor condimentum at. Sed eget aliquam lorem, et molestie purus. Mauris blandit posuere ex, sed lacinia dolor auctor et.

In hac habitasse platea dictumst. Aenean in nisl vitae ligula porttitor vulputate at et odio. Donec quis est in urna sodales ornare. Phasellus eu condimentum dui. Curabitur consectetur tortor ipsum, a volutpat lectus tincidunt a. Nulla facilisi. Aliquam risus eros, pellentesque sed convallis sit amet, accumsan vel libero.

Поддерживаемые браузеры

Наше демо без проблем функционирует во всех современных браузерах и на различных устройствах. Как обычно, в наших учебных материалах мы используем jsfiddle для демонстрации, просмотреть результат работы можно посмотреть здесь

Заключение

В данном сжатом руководстве «Верстка табов, tabs css» мы успешно разработали полезный адаптивный компонент вкладок, используя HTML, CSS и JavaScript. Хотя доступность компонента не является оптимальной, вы можете улучшить его функциональность в следующем этапе. Удачного кодинга!