Создание вкладок (табов). Урок 2

Создание вкладок (табов)

От автора: итак, в предыдущем уроке мы с вами создали необходимую для вкладок (табов) разметку. При этом разметка позволяет не лимитировать количество вкладок в блоке, количество ограничено лишь размерами самого блока. В этом уроке нам необходимо написать клиентский скрипт, который будет управлять нашими табами.

скачать исходникискачать урок

Клиентский скрипт мы будем писать перед закрывающим тегом body. Также можно вынести его по желанию в отдельный файл и подключать уже этот файл. Давайте подключим библиотеку jQuery и напишем функцию-обертку для скрипта:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Сейчас тексты всех вкладок у нас скрыты в CSS следующим правилом:

Нам нужно, чтобы по умолчанию был показан текст первой вкладки. Для этого обратимся к блоку #tabs-1 и покажем его методом show():

Идем далее. Как вы помните, текст вкладки связан с самой вкладкой. Связаны они значением атрибута href вкладки (якорь) и идентификатором блока с текстом, т.е. значение якоря конкретной ссылки равно значению ID конкретного блока с текстом.

Соответственно, при клике по вкладке нам нужно будет получить значение атрибута href ссылки данной вкладки:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

При этом необходимо предусмотреть вариант, когда клик происходит по уже активной вкладке (у таковой имеется класс active), в таком случае мы ничего делать не будем и завершим дальнейшее выполнение скрипта:

Теперь давайте получим 2 необходимые для работы ссылки (или ID блоков текста): ссылку на текст, который необходимо показать, и ссылку на текст, который нужно скрыть. Иными словами, это будут ссылки на новую активную вкладку и предыдущую активную вкладку:

Теперь уберем класс active у предыдущей активной вкладки о присвоим этот класс вкладке, с которой работаем (для которой произошло событие клика):

Собственно, нам осталось лишь скрыть текущий блок текста и показать новый блок текста. Это сделать просто, поскольку у нас есть все необходимое для этого — значения переменных link и prevActive. Также не забываем после всех действий вернуть FALSE для отмены перехода по ссылке:

Вот и все, скрипт готов. С поставленной задачей мы успешно справились, не задействуя при этом библиотеку jQuery UI.

На этом наш урок завершен. Удачи и до новых встреч!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки: ,

Похожие статьи:

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

Комментарии (53)