StillMaster » Веб разработка » CSS » Как сделать переключение вкладок табами.

Как сделать переключение вкладок табами.
Как сделать переключение вкладок табами.

В одном из проектов который я делал на заказ, заказчик хотел сделать переключение на различный материал с помощью табов, в статье расскажу вам свой вариант реализации.

Для создания переключения табами вам нужно использовать HTML и CSS. Вот пример кода, который создает табы и добавляет функциональность переключения между ними:

Tab 1 Content

This is the content of Tab 1.

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Tab1')">Tab 1</button>
  <button class="tablinks" onclick="openTab(event, 'Tab2')">Tab 2</button>
  <button class="tablinks" onclick="openTab(event, 'Tab3')">Tab 3</button>
</div>

<div id="Tab1" class="tabcontent">
  <h3>Tab 1 Content</h3>
  <p>This is the content of Tab 1.</p>
</div>

<div id="Tab2" class="tabcontent">
  <h3>Tab 2 Content</h3>
  <p>This is the content of Tab 2.</p>
</div>

<div id="Tab3" class="tabcontent">
  <h3>Tab 3 Content</h3>
  <p>This is the content of Tab 3.</p>
</div>

<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>

В этом примере я создал три кнопки табов с помощью элемента button и добавлением атрибутonclick, который вызывает функциюopenTab(). Эта функция открывает выбранный таб и закрывает остальные. Я также создал три элементаdiv с классомtabcontent, каждый из которых содержит контент для соответствующего таба. Я использовал атрибутid для каждого элементаdiv, чтобы можно было открыть выбранный таб с помощью функцииopenTab().

Также я использовал  CSS, чтобы скрыть все элементыdiv с классомtabcontent, кроме выбранного таба. Также с помощью скрипта  добавляем классactive к выбранной кнопке таба, чтобы можно было отличить ее от остальных.

Это только пример, и вы можете настроить стили и контент табов в соответствии с вашими потребностями.

Яндекс Практикум

Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .


Поделиться:

92 16.11.23