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

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

[spoiler title = «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;
}

[/spoiler]
 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, чтобы при загрузке документа у нас показалась первая вкладка.

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

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

Комментарии:


  1. brbt

    Прошу, подскажите, куда в JavaScript следует дописать следующую строку кода:

    {effect:’fade’,fadeOutSpeed:300}

    ?

    Благодарю!

  2. admin

    Для чего этот эффект нужен в данном случае?

  3. Алеся

    Подскажите, почему в опере и в IE при первой загрузке странице с данным скриптом содержимое вкладок по умолчанию не выводится, пока не нажмешь на них?

  4. Дмитрий

    Спасибо за скрипт. Как раз искал простой перключатель. Отчасти потому, что в яваскрипте не разбираюсь.
    Переключатель работает нормально, но возникла следующая проблема. При загрузке страницы вкладка «по-умолчанию» не открывается, т.е. все вкладки изначально скрыты. Когда по щелкаешь по названиям, то работает нормально. Подскажите пожалуйста в чем может быть проблема?

    P.S. Там где вы приводите html-код переключателя, есть пробема с кавычками в первом теге li, исправьте пожалуйста, на случай если кто просто скопирует ваш код 🙂

  5. Дмитрий

    Решение оказалось простым: в том же первом теге li из кода класс указан как «defaultTab». Необходимо было его изменить на «defaulttab». После этого заработало.

    Возникла другая проблема: в контенте этих вкладок у меня установлены яндекс.карты, но при загрузке страницы появляется сообщение об ошибке
    Cannot convert ‘this.coordSystem’ to object
    И загружается карта только на вкладке «по-умолчанию», на других вкладках карты нет. Видимо тут какой-то конфликт яваскриптов, но я не могу разобраться в чем дело.

  6. Костя

    Алеся, у автора небольшая опечатка.
    class = «defaultTab», а надо t с маленькой буквы и все заработает.(class = «defaulttab»)

    PS Cпасибо за табы!




YouTube бесплатно навести проклятие порчу