От автора: итак, в предыдущем уроке мы с вами создали необходимую для вкладок (табов) разметку. При этом разметка позволяет не лимитировать количество вкладок в блоке, количество ограничено лишь размерами самого блока. В этом уроке нам необходимо написать клиентский скрипт, который будет управлять нашими табами.
Клиентский скрипт мы будем писать перед закрывающим тегом body. Также можно вынести его по желанию в отдельный файл и подключать уже этот файл. Давайте подключим библиотеку jQuery и напишем функцию-обертку для скрипта:
|
1 2 3 4 5 6 |
<script src="//code.jquery.com/jquery-latest.js"></script> <script> $(function(){ }); </script> |
Сейчас тексты всех вкладок у нас скрыты в CSS следующим правилом:
|
1 2 3 |
.tabs-text{ display: none; } |
Нам нужно, чтобы по умолчанию был показан текст первой вкладки. Для этого обратимся к блоку #tabs-1 и покажем его методом show():
|
1 2 3 |
$(function(){ $('#tabs-1').show(); }); |
Идем далее. Как вы помните, текст вкладки связан с самой вкладкой. Связаны они значением атрибута href вкладки (якорь) и идентификатором блока с текстом, т.е. значение якоря конкретной ссылки равно значению ID конкретного блока с текстом.
Соответственно, при клике по вкладке нам нужно будет получить значение атрибута href ссылки данной вкладки:
|
1 2 3 4 5 6 7 |
$(function(){ $('#tabs-1').show(); $('#items li').click(function(){ }); }); |
При этом необходимо предусмотреть вариант, когда клик происходит по уже активной вкладке (у таковой имеется класс active), в таком случае мы ничего делать не будем и завершим дальнейшее выполнение скрипта:
|
1 2 3 4 5 6 7 8 9 |
$(function(){ $('#tabs-1').show(); $('#items li').click(function(){ if( $(this).attr('class') == 'active' ){ return false; } }); }); |
Теперь давайте получим 2 необходимые для работы ссылки (или ID блоков текста): ссылку на текст, который необходимо показать, и ссылку на текст, который нужно скрыть. Иными словами, это будут ссылки на новую активную вкладку и предыдущую активную вкладку:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function(){ $('#tabs-1').show(); $('#items li').click(function(){ if( $(this).attr('class') == 'active' ){ return false; } var link = $(this).children().attr('href'); // ссылка на текст вкладки для показа var prevActive = $('li.active').children().attr('href'); // ссылка на текст пока что активной вкладки }); }); |
Теперь уберем класс active у предыдущей активной вкладки о присвоим этот класс вкладке, с которой работаем (для которой произошло событие клика):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function(){ $('#tabs-1').show(); $('#items li').click(function(){ if( $(this).attr('class') == 'active' ){ return false; } var link = $(this).children().attr('href'); // ссылка на текст вкладки для показа var prevActive = $('li.active').children().attr('href'); // ссылка на текст пока что активной вкладки $('li.active').removeClass('active'); $(this).addClass('active'); }); }); |
Собственно, нам осталось лишь скрыть текущий блок текста и показать новый блок текста. Это сделать просто, поскольку у нас есть все необходимое для этого — значения переменных link и prevActive. Также не забываем после всех действий вернуть FALSE для отмены перехода по ссылке:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(function(){ $('#tabs-1').show(); $('#items li').click(function(){ if( $(this).attr('class') == 'active' ){ return false; } var link = $(this).children().attr('href'); // ссылка на текст вкладки для показа var prevActive = $('li.active').children().attr('href'); // ссылка на текст пока что активной вкладки $('li.active').removeClass('active'); $(this).addClass('active'); // скрываем/показываем текст вкладок $(prevActive).fadeOut(500, function(){ $(link).fadeIn(); // изменяем цвета $('#items li').css('background', '#ccc'); $('li.active').css('background', '#f3f3f3'); }); return false; }); }); |
Вот и все, скрипт готов. С поставленной задачей мы успешно справились, не задействуя при этом библиотеку jQuery UI.
На этом наш урок завершен. Удачи и до новых встреч!
Комментарии (53)