jQuery — простой переключатель вкладок (табов)

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

Конечно есть и отменная реализация табов в jQuery UI, но UI хорош тем. что стилидля всех элементов интерфейса уже сформированы, и пилить свой, принципиально отличающийся по концепции дело не 5 секунд, к тому же там куча возможностей,  которые использоваться будут не всегда — мы ищем очень простой таб свитчер.

Итак приступим.

Что нам потребуется

Да собственно только сам jQuery, Вы удивитесь, когда увидите как мало кода нам нужно написать.

HTML

<ul class="tabs">
	<li><a href="javascript:void(0);" rel = "tab-1 class = "defaultTab"">Вкладка 1</a></li>
	<li><a href="javascript:void(0);" rel = "tab-2">Вкладка 2</a></li>
</ul>
<div class = "tab-content" id = "tab-1">Содердимое 1</div>
<div class = "tab-content" id = "t

Что у нас тут есть?

1 Вкладки, выполненные классически в виде списка ul, стилизованный под вкладки

2 Ссылки являющийся активными элементами. В атрибуте rel содеражится id связанной вкладки, атрибут href содержит заглушку javascript:void(0)(очень часто используют символ якоря «#» но как известно, при нажатии на него нередко пользователя перебрасывает вверх страницы, что весьма неприятно), также у одной из вкладок устанавливаем css класс defaulttab, чтобы эта вкладка была выбрана по умолчанию

3 Блоки с содержимым в виде элемента div, должен иметь id повязанный с атрибутом rel ссылки, и класс, в нашем случае tab-content, которым мы будем манипулировать в скриптах.

CSS

Стили могут быть любыми, приведу стили из примера под спойлером — их разбирать мы не будем:

ul.tabs {
width:250px;
margin:0;
padding:0;
}
ul.tabs li {
display:block;
float:left;
padding:0 5px;
}
ul.tabs li a:hover, ul.tabs li a.selected {
color:#5D8BB3;
}
ul.tabs li a {
display:block;
float:left;
padding:5px;
font-size:0.8em;
background-color:#e0e0e0;
color:#666;
text-decoration:none;
}

.tab-content {
clear:both;
border:1px solid #ddd;
padding:10px;
}

 JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14

jQuery(document).ready(function() {
	jQuery('.tabs a').click(function(){
		switch_tabs(jQuery(this));
});
switch_tabs(jQuery('.defaulttab'));
});
function switch_tabs(obj)
{
	jQuery('.tab-content').hide();
	jQuery('.tabs a').removeClass("selected");
	var id = obj.attr("rel");
	jQuery('#'+id).show();
	obj.addClass("selected");
}

Тут в принципе тоже все довольно очевидно.
Указываем селектор, и задаем обработчик события при нажатию на нашу вкладку, а точнее мы просто вызываем функцию switch_tabs и передаем параметр: объект самой ссылки по которой мы кликаем. Далее в функции мы сначала прячем все блоки с содержимым, потом удаляем класс selected, получаем атрибут rel из ссылки по которой мы кликнули, и показываем необходимый таб.
Также мы вызываем функцию, передавая в нее ссылку с классом defaulttab, чтобы при загрузке документа у нас показалась первая вкладка.

Работающий пример:

• Вкладка 1
• Вкладка 2

jQuery(document).ready(function() {
jQuery('.tabs a').click(function(){
switch_tabs(jQuery(this));
});
switch_tabs(jQuery('.defaulttab'));
});
function switch_tabs(obj)
{
jQuery('.tab-content').hide();
jQuery('.tabs a').removeClass("selected");
var id = obj.attr("rel");
jQuery('#'+id).show();
obj.addClass("selected");
}

Вот и все, проще некуда! И ненужно подключать jQuery UI с его немалым объемом, для одних только табов 🙂
Подсмотрено здесь