jQuery tabs - простые вкладки
Если у вас есть большое количество информации, но свободное место на сайте отсутствует, то лучшим решением этой проблемы будет создание jQuery tabs. jQuery вкладки скрывают часть контента, занимая при этом значительно меньше места.
1. Для начала необходимо создать HTML структуру для будущих вкладок.
<h1>Простые вкладки</h1>
<ul id="tabs">
<li><a href="#description">Описание</a></li>
<li><a href="#photos">Фото</a></li>
<li><a href="#details">Подробное описание</a></li>
<li><a href="#reviews">Обзоры</a></li>
<li><a href="#related">Товары</a></li>
</ul>
<div class="tabs-block">
<div id="description" class="tab-section">
<h2>Описание</h2>
<p>Этот раздел содержит описание товаров.</p>
</div>
<div id="photos" class="tab-section">
<h2>Фото</h2>
<p>Этот раздел содержит фотографии товаров.</p>
</div>
<div id="details" class="tab-section">
<h2>Подробное описание</h2>
<p>Этот раздел содержит подробное описание – размер, вес, цвет, материалы и т.д.</p>
</div>
<div id="reviews" class="tab-section">
<h2>Обзоры</h2>
<p>Этот раздел содержит обзоры товаров</p>
</div>
<div id="related" class="tab-section">
<h2>Товары</h2>
<p>Этот раздел содержит список покупаемых товаров.</p>
</div>
</div>
Данный HTML код начинается со списка, состоящего из ссылок. Щелкая по данным ссылкам, в конечном итоге, будет отображаться соответствующий <div> контейнер, все остальные контейнеры будут скрыты.
2. Теперь необходимо использовать jQuery для скрытия <div> контейнеров. Для этого пропишем в подключаемом файле scripts.js следующий код:
$(document).ready(function(){
$('.tab-section').hide();
});
Теперь, после загрузки страницы, пользователь увидит только список, состоящий из ссылок!
3. Затем, мы должны предотвратить срабатывание ссылки, когда по одной из них будет произведен щелчок. Для этого привяжем функцию к ссылкам.
$(document).ready(function(){
$('.tab-section').hide();
$('#tabs a').bind('click', function(e){
e.preventDefault;
});
});
Теперь при клике по ссылке, переход по ней производиться не будет, собственно, за это действие и отвечает preventDefault.
4. Далее, необходимо сделать так, чтобы при клике по ссылке отображалось соответствующий контейнер с контентом. Для этого добавим $(this.hash).show() перед e.preventDefault из предыдущего пункта.
$(document).ready(function(){
$('.tab-section').hide();
$('#tabs a').bind('click', function(e){
$(this.hash).show();
e.preventDefault;
});
});
Конструкция $(this.hash).show() означает, что при клике по ссылке, необходимо отобразить контейнер, id которого совпадает со значением href ссылки. Hash – возвращает значение href ссылки. Другими словами, если вы кликаете по ссылке, у которой параметр href="#description”, то конструкция $(this.hash).show() будет равносильна $(#description).show().
5. Теперь, если кликнуть на какую-нибуть ссылку, то отобразиться связанный с ней контейнер. Однако, если продолжать кликать по другим ссылкам, новые контейнеры станут видимыми, а старые не исчезнут. Давайте исправим это, добавив конструкцию $('.tab-section:visible').hide(), которая означает, что при клике видимые элементы с классом tab-section должны исчезнуть:
$(document).ready(function(){
$('.tab-section').hide();
$('#tabs a').bind('click', function(e){
$('.tab-section:visible').hide();
$(this.hash).show();
e.preventDefault;
});
});
6. Все, основной код для jQuery tabs написан и вкладки имеют законченный вид. Осталось только добавить css стили в подключаемый файл styles.css:
.tabs-block {
border: 2px solid #ccc;
margin-top: -2px;
}
#tabs {
overflow: hidden;
margin: 0;
padding: 0;
}
#tabs li {
display: block;
list-style: none;
float: left;
}
#tabs li a {
display: block;
padding: 2px 5px;
border: 2px solid #ccc;
border-bottom: 0 none;
text-align: center;
text-decoration: none;
}
.tab-section {
padding: 10px;
}
#tabs li a.current {
background: #fff;
color: #000;
}
7. После добавления стилей, вкладки стали красиво выглядеть, но непонятно какая из них активна в данный момент. Исправить это можно, добавив специальный класс к активной вкладке:
$(document).ready(function(){
$('.tab-section').hide();
$('#tabs a').bind('click', function(e){
$('#tabs a.current').removeClass('current'); //Убираем класс после клика
$('.tab-section:visible').hide();
$(this.hash).show();
$(this).addClass('current'); //Добавляем класс после клика к той ссылке, по которой был произведен клик
e.preventDefault;
});
});
В файл стилей styles.css добавим класс:
#tabs li a.current {
background: #fff;
color: #000;
}
8. Последний штрих: сделаем так, чтобы при загрузке страницы первая jQuery вкладка стала активной. Добавим filter(':first').click():
$(document).ready(function(){
$('.tab-section').hide();
$('#tabs a').bind('click', function(e){
$('#tabs a.current').removeClass('current');
$('.tab-section:visible').hide();
$(this.hash).show();
$(this).addClass('current');
e.preventDefault;
}).filter(':first').click();
});
При помощи фильтра и псевдокласса first, мы произведем автоматический клик по первой вкладке, сразу же после загрузке страницы. Наши jQuery вкладки готовы!
