HTML-структура
Основа наших вкладок – это несложная HTML-разметка:
Код
<ul class="tabs">
<li><a href="#tab1" class="tab-link active">Вкладка 1</a></li>
</ul>
<div id="tab1" class="tab-content active">
</div>
<li><a href="#tab1" class="tab-link active">Вкладка 1</a></li>
</ul>
<div id="tab1" class="tab-content active">
</div>
Здесь:
Код
<ul class="tabs">
1. Список ссылок на вкладки.
Код
<a href="#tab1" class="tab-link active">Вкладка 1</a></li>
2. Отдельный элемент списка с ссылкой на содержимое вкладки.
Код
<div id="tab1" class="tab-content active">
3. Блок с содержимым вкладки.
CSS-стили
CSS-стили определяют внешний вид вкладок и их поведение:
Код
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.tab-link.active {
font-weight: bold;
}
display: none;
}
.tab-content.active {
display: block;
}
.tab-link.active {
font-weight: bold;
}
Здесь мы скрываем все блоки с содержимым по умолчанию и отображаем только активную вкладку. Класс active также применяется к активной ссылке вкладки.
JavaScript-логика
Ключевая часть скрипта – это обработка кликов по ссылкам на вкладки:
Код
$(document).ready(function(){
$('.tab-link').click(function(e){
// ... логика переключения вкладок ...
});
});
$('.tab-link').click(function(e){
// ... логика переключения вкладок ...
});
});
При клике на ссылку:
Предотвращаем стандартное поведение ссылки: e.preventDefault();
Получаем ID целевой вкладки: var tabId = $(this).attr('href');
Удаляем класс active у всех ссылок и блоков с содержимым.
Добавляем класс active к выбранной ссылке и соответствующему блоку с содержимым.
Полный код
Код
$(document).ready(function(){
$('.tab-link').click(function(e){
e.preventDefault();
var tabId = $(this).attr('href');
$('.tab-link').removeClass('active');
$(this).addClass('active');
$('.tab-content').removeClass('active');
$(tabId).addClass('active');
});
});
$('.tab-link').click(function(e){
e.preventDefault();
var tabId = $(this).attr('href');
$('.tab-link').removeClass('active');
$(this).addClass('active');
$('.tab-content').removeClass('active');
$(tabId).addClass('active');
});
});
Заключение
Этот простой пример демонстрирует, как создать функциональные вкладки с помощью JavaScript и CSS. Вы можете расширить эту базовую структуру, добавив анимацию, стилизацию и другие интерактивные элементы.
Дополнительные возможности:
Анимация: Используйте CSS-транзиции или библиотеки анимации для создания плавных переходов между вкладками.
Акордеон: Преобразуйте вкладки в акордеон, позволяющий открывать только одну вкладку за раз.
Сохранение состояния: Используйте localStorage или cookies для сохранения состояния вкладок при перезагрузке страницы.
Помните: Этот код является отправной точкой. Вы можете адаптировать его под свои нужды и создать уникальные и удобные вкладки для вашего сайта.
Примечание: Эта статья предназначена для начинающих веб-разработчиков и может быть дополнена более сложными примерами и объяснениями.
