Как сделать табы в javascript

Узнайте, как с помощью языка JavaScript создать интерактивные табы, подсвечивающие нужную информацию на странице. Подробное объяснение простого примера с использованием HTML, CSS и JavaScript.

Табы на JS

Табы - это интерфейс, который позволяет пользователям переключаться между различными панелями содержимого. Они помогают организовать содержимое сайта и сделать его более привлекательным для посетителей. В настоящее время многие сайты используют табы для предоставления пользователям более легкого и интуитивно понятного способа навигации. Однако создание табов может быть весьма сложным, особенно если вы используете HTML и CSS для реализации. Но не беспокойтесь, так как вы можете легко создать табы, используя JavaScript.

Как создать табы с помощью JavaScript

Создание табов с помощью JavaScript просто и быстро. Все, что вам нужно сделать, это настроить HTML и CSS и написать несколько строк JavaScript-кода. Начнем с настройки HTML:

<div class="tabs">
  <div class="tab">
    <input type="radio" id="tab-1" name="tab-group-1" checked>
    <label for="tab-1">Вкладка 1</label>
    <div class="content">Содержимое первой вкладки</div>
  </div>
  <div class="tab">
    <input type="radio" id="tab-2" name="tab-group-1">
    <label for="tab-2">Вкладка 2</label>
    <div class="content">Содержимое второй вкладки</div>
  </div>
</div>

Обратите внимание, что вкладка 1 имеет атрибут «checked», что означает, что она будет активной по умолчанию. Теперь настроим CSS:

.tabs {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab {
  display: inline-block;
}

.tab label {
  background: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  margin-left: -1px;
  position: relative;
  left: 1px;
}

.tab [type=radio] {
  display: none;
}

.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc;
}

[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}

[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

Это простой CSS-код, который позволяет нам правильно отображать табы. Теперь мы можем добавить немного JavaScript:

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

tabs.forEach(function(tab) {
  tab.addEventListener('click', function() {
    var tab = this;
    var tabs = tab.parentElement.querySelectorAll('.tab');
    var contents = tab.parentElement.querySelectorAll('.content');
    var index = 0;

    tabs.forEach(function(t, i) {
      if (t == tab) {
        index = i;
      }
    });

    tabs.forEach(function(t) {
      t.classList.remove('active');
    });

    tab.classList.add('active');

    contents.forEach(function(c) {
      c.classList.remove('active');
    });

    contents[index].classList.add('active');
  });
});

В коде выше мы добавляем слушатель событий на каждую вкладку. Когда пользователь кликает на вкладку, слушатель событий активируется, а затем просто добавляет или удаляет класс «active» для вкладок и соответствующего содержимого. Это делает табы активными и делает соответствующее содержимое видимым. Это все, что вам нужно для создания табов на JavaScript.

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