Закрыть ... [X]

Как сделать на jquery

Вкладки (табы) — элемент крайне востребованный в современном веб-дизайне. Он позволяет разместить большое количество информации в ограниченном пространстве. Каждый уважающий себя верстальщик должен уметь делать табы, и именно этим я сегодня собираюсь заняться.
Призовем на помощь замечательную библиотеку jQuery и сделаем примитивные, но вполне себе работающие табы.

1. Разметка

Каждая вкладка имеет два элемента — тайтл и контент. При клике на тайтл соответственно открывается контент. Сделаем тайтлы всех табов одним списком, а контенты — другим. Это самый простой вариант разметки.

2. Стили

Стили тут никакой роли не играют, они могут быть любыми. У меня вот так:

  • Закладка 1
  • Закладка 2
  • Закладка 3
  • Закладка 4
  • Закладка 5
  • Контент закладки как сделать jquery на jquery 1
  • Контент закладки 2
  • Контент закладки 3
  • Контент закладки 4
  • Контент закладки 5

Обязательно создаем специальный класс active, чтобы отметить им выделенную вкладку.

3.Скрипт

Создание вкладок состоит из решения нескольких задач.

1) Необходимо спрятать контент неактивных вкладок.
Решение: можно изначально присвоить элементам списка tab-content свойство display:none или же сделать это после создания странички с помощью скрипта. В первом случае мы гарантированно не увидим неактивных элементов, во втором может наблюдаться их появление и стремительное исчезновение, так как скрипт начинает работать уже после генерации страницы. Плюс второго решения в том, что при отключенном JavaScript пользователю будет доступно содержимое всех вкладок, в первом же случае они будут скрыты. Пойдем по первому пути, добавим в таблицу стилей правило.tab-title li{display:none;}.

2) Необходимо при создании страницы активизировать одну вкладку и вывести ее контент. Присвоим первому табу класс active и выведем его содержание.

3) Необходимо по клику переключать вкладки. Создадим для этого обработчик события клика по неактивным табам.

Важно: обработчик клика в коде должен располагаться перед присвоением первому табу активного класса (задача 2), иначе действие обработчика не будет распространяться на первую (уже активную) вкладку.

А вот результат:

Вам будет интересно

Простые табы на jQuery


Поделись с друзьями



Рекомендуем посмотреть ещё:



Создаем собственный слайдер на jquery, шаг за шагом с подробным объяснением Дартс кабинет своими руками

Как сделать на jquery Как сделать на jquery Как сделать на jquery Как сделать на jquery Как сделать на jquery

ШОКИРУЮЩИЕ НОВОСТИ