Горизонтальные табы

Сегодня мы сделаем адаптивные вкладки для сайта, так называемые табы. Сначала используя jQuery, затем нативный JavaScript.
Демонстрация

В HTML-файле создадим структуру будущих табов: обёртку для табов - mywrap-tabs, сами вкладки - mytabs (активный таб и неактивный), и содержимое вкладок - mycontent (так же активное и неактивное содержимое в зависимости от выбранной вкладки).

<div id="mywrap-tabs" class="mywrap-tabs">
  <div class="mytabs">
    <div class="mytab active">CSS</div>
    <div class="mytab">SASS</div>
  </div>
  <div class="mytabs">

  </div>
  <div class="mycontent">
    <div class="mytab-content active">
      1
    </div>
    <div class="mytab-content">
      2
    </div>
  </div>
</div>

Стилизация табов в css-файле.

.mywrap-tabs {
  max-width: 100%;
  margin: 38px auto;
  font-family: sans-serif;
}
.mywrap-tabs .mytabs {
  background-color: #262938;
}
.mywrap-tabs .mytabs:first-child { padding: 7px; }
.mywrap-tabs .mytabs::after {
  content: '';
  height: 0;
  display: block;
  clear: both;
}
.mywrap-tabs .mytabs .mytab {
  float: left;
  border-top: 4px solid #53798f;
  padding: 9px 19px;
  background-color: #375566;
  color: #fafaf1;
  transition: background-color .25s linear;
  cursor: pointer;
}
.mywrap-tabs .mytabs .mytab:hover {
  background-color: #304c5c;
  color: #fafaf1;
}
.mywrap-tabs .mytabs .mytab.active {
  background-color: #213c4b;
  color: #fafaf1;
  border-top: 4px solid transparent;
}
.mywrap-tabs .mycontent {
  color: #fafaf1;
  background-color: #213c4b;
  padding: 6px 11px;
}
.mywrap-tabs .mycontent .mytab-content {
  display: none;
  padding: 14px 9px;
}
.mywrap-tabs .mycontent .mytab-content.active { display: block; }

И главная магия в js-файле с помощью jQuery.

$(function() {
  $('#mywrap-tabs').on('click', '.mytab', function() {

    const tabs = $('#mywrap-tabs .mytab'),
    tabContent = $('#mywrap-tabs .mytab-content');

    //Удаляем классы active

    tabs.removeClass('active');
    tabContent.removeClass('active');

    //Добавляем классы active

    $(this).addClass('active');
    tabContent.eq($(this).index()).addClass('active');

    return false;
  });
});
Демонстрация

Горизонтальные табы - нативный JavaScript

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

  • headerSelector - класс обёртки для кнопок табов;
  • tabSelector - класс кнопок табов;
  • contentSelector - класс контента табов;
  • activeClass - класс выделения автивного таба (без точки «.»);
  • display - block, flex, span и т.п. (если не передан параметр, то block);
window.addEventListener('DOMContentLoaded', () => {

    const tabs = (headerSelector, tabSelector, contentSelector, activeClass, display = 'block') => {
        const header = document.querySelector(headerSelector),
            tab = document.querySelectorAll(tabSelector),
            content = document.querySelectorAll(contentSelector);

        function hideTabContent() {
            content.forEach(item => {
                item.style.display = 'none';
            });

            tab.forEach(item => {
                item.classList.remove(activeClass);
            });
        }

        // при запуске функции без аргументов активным будет 1 элемент

        function showTabContent(i = 0) {
            content[i].style.display = display;
            tab[i].classList.add(activeClass);
        }

        hideTabContent();
        showTabContent();

        header.addEventListener('click', (e) => {
            const target = e.target;
            if (target &&
                (target.classList.contains(tabSelector.replace(/\./, "")) ||
                    target.parentNode.classList.contains(tabSelector.replace(/\./, "")))) {
                tab.forEach((item, i) => {
                    if (target == item || target.parentNode == item) {
                        hideTabContent();
                        showTabContent(i);
                    }
                });
            }
        });
    };

    tabs('.mytabs', '.mytab', '.mytab-content', 'active');

});
Изучаем английский
EnglishRussian
TabsВкладки
WrapОбёртка
AfterПосле
TransparentПрозрачный
admin