В одном из проектов который я делал на заказ, заказчик хотел сделать переключение на различный материал с помощью табов, в статье расскажу вам свой вариант реализации.
Для создания переключения табами вам нужно использовать HTML и CSS. Вот пример кода, который создает табы и добавляет функциональность переключения между ними:
This is the content of Tab 1.Tab 1 Content
<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 .