Как создать адаптивный компонент вкладок с использованием CSS и совсем немного JavaScript

Дата публикации: 2018-03-19

От автора: в этом руководстве вы узнаете, как создать адаптивный компонент вкладки с использованием CSS и совсем немного JavaScript. Вполне возможно создавать компоненты вкладок и на чистом CSS, но для этого примера давайте на практике наработаем наши навыки JavaScript.

Вот что мы собираемся создать:

Примечание. В этом руководстве я не буду уделять внимание тому, как сделать компонент вкладок доступным, поэтому изучение доступности, безусловно, будет правильным следующим шагом.

1. 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" data-index="0">
      <!-- content here -->
    </div>
    <div class="tabs-panel" data-index="1">
      <!-- content here -->
    </div>
    <div class="tabs-panel" data-index="2">
      <!-- content here -->
    </div>
  </div>
</div>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</div>

</div>

2. CSS

В качестве следующего шага давайте укажем для компонента несколько правил CSS. Ничего особенного, просто несколько общих стилей. Следует отметить, что мы не используем для переключения между вкладками никаких переходов (например, fade, slide); вместо этого они появляются и исчезают с помощью простого переключателя вкл / выкл. Начальные стили:

.tabs-container {
  max-width: 1000px;
  margin: 50px auto;
  padding: 25px;
}
 
.tabs {
  display: flex;
}
 
.tabs li:not(:last-child) {
  margin-right: 7px;
}
 
.tabs li a {
  display: block;
  position: relative;
  top: 4px;
  padding: 10px 25px;
  border-radius: 2px 2px 0 0;
  background: white;
  opacity: 0.7;
  transition: all 0.1s ease-in-out;
}
 
.tabs li.active a,
.tabs li a:hover {
  opacity: 1;
  top: 0;
}
 
.tabs-content {
  position: relative;
  z-index: 2;
  padding: 25px;
  border-radius: 0 4px 4px 4px;
  background: white;
}
 
.tabs-panel {
  display: none;
}
 
.tabs-panel.active {
  display: block;
}

.tabs-container {

max-width: 1000px;

margin: 50px auto;

padding: 25px;

}

.tabs {

display: flex;

}

.tabs li:not(:last-child) {

margin-right: 7px;

}

.tabs li a {

display: block;

position: relative;

top: 4px;

padding: 10px 25px;

border-radius: 2px 2px 0 0;

background: white;

opacity: 0.7;

transition: all 0.1s ease-in-out;

}

.tabs li.active a,

.tabs li a:hover {

opacity: 1;

top: 0;

}

.tabs-content {

position: relative;

z-index: 2;

padding: 25px;

border-radius: 0 4px 4px 4px;

background: white;

}

.tabs-panel {

display: none;

}

.tabs-panel.active {

display: block;

}

3. JavaScript

Теперь пришло время рассмотреть требуемый код JavaScript. Каждый раз, когда мы нажимаем на вкладку, мы делаем следующее:

удаляем для соответствующей вкладки (по умолчанию первая) и соответствующей панели (по умолчанию первая) класс active.

находим родительский элемент li для этой вкладки, добавляем для него класс active и возвращаем его индекс.

находим панель вкладок, значение атрибута которой (атрибут data-index) соответствует указанному выше значению индекса, и присваиваем вкладке класс active.

Вот полный код JavaScript:

const tabLinks = document.querySelectorAll(".tabs a");
const tabPanels = document.querySelectorAll(".tabs-panel");
 
for(let el of tabLinks) {
  el.addEventListener("click", e => {
    e.preventDefault();
     
    document.querySelector('.tabs li.active').classList.remove("active");
    document.querySelector('.tabs-panel.active').classList.remove("active");
 
    const parentListItem = el.parentElement;
    parentList.classList.add("active");
    const index = [...parentListItem.parentElement.children].indexOf(parentListItem);
     
    const panel = [...tabPanels].filter(el => el.getAttribute("data-index") == index);
    panel[0].classList.add("active");
  });
}

const tabLinks = document.querySelectorAll(".tabs a");

const tabPanels = document.querySelectorAll(".tabs-panel");

for(let el of tabLinks) {

el.addEventListener("click", e => {

e.preventDefault();

document.querySelector('.tabs li.active').classList.remove("active");

document.querySelector('.tabs-panel.active').classList.remove("active");

const parentListItem = el.parentElement;

parentList.classList.add("active");

const index = [...parentListItem.parentElement.children].indexOf(parentListItem);

const panel = [...tabPanels].filter(el => el.getAttribute("data-index") == index);

panel[0].classList.add("active");

});

}

4. Адаптивные функции

Наш компонент почти готов! Последнее, что нам нужно — сделать компонент адаптивным. Так, например, когда ширина области просмотра имеет максимум 600 пикселей, макет должен изменяться и выглядеть следующим образом:

Поскольку мы используем подход, ориентированный в первую очередь на компьютеры, вот правила CSS, которые мы должны перезаписать:

@media screen and (max-width: 600px) {
  .tabs {
    flex-direction: column;
  }
     
  .tabs li {
    width: 100%;
  }
     
  .tabs li:not(:last-child) {
    margin-right: 0;
  }
     
  .tabs li a {
    border-radius: 0;
    opacity: 1;
    top: 0;
  }
     
  .tabs li.active a::before {
    content: '•';
    padding-right: 5px;
  }
     
  .tabs-content {
    border-radius: 0;
  }
}

@media screen and (max-width: 600px) {

.tabs {

flex-direction: column;

}

.tabs li {

width: 100%;

}

.tabs li:not(:last-child) {

margin-right: 0;

}

.tabs li a {

border-radius: 0;

opacity: 1;

top: 0;

}

.tabs li.active a::before {

content: '•';

padding-right: 5px;

}

.tabs-content {

border-radius: 0;

}

5. Поддержка браузерами

Наша демо-версия хорошо работает во всех новейших браузерах и на всех устройствах. Как обычно, мы используем Babel для приведения кода ES6 к ES5.

Заключение

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

Автор: George Martsoukos

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Метки: css