- Автор темы
- #1
Пожалуйста,
Войдите
или
Зарегистрируйтесь
для просмотра содержания URL!
/ Пожалуйста,
Войдите
или
Зарегистрируйтесь
для просмотра содержания URL!
Вкладки стали весьма популярными в структуре сайта, они помогают экономить место на ресурсе и привлекать пользователей своей анимацией при смене закладок. В данном уроке мы рассмотрим процесс организации вкладок для компактного вывода содержания. Для создания таких вкладок и организации внешнего вида, будет использоваться техника CSS3, и подключенная библиотека jQuery с приложениями Google, чтобы ускорить загрузку сайта. А сам функционал реализуется несколькими строками JavaScript кода. Такие вкладки будут отлично дополнять дизайн любого сайта..
HTML. Атрибут title может показаться излишеством, но в нашем случае он будет использоваться в части jQuery.
HTML:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Следует объяснить некоторое содержание:
- #tabs –неупорядоченный список, который содержит навигацию закладок.
- #content – контейнер для содержания каждой закладки.
Теперь рассмотрим стили CSS которые используются для демонстрации, все достаточно просто:
CSS:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Последний шаг будет jQuery. Код достаточно прост, для наглядного описания некоторые строчки описаны:
Код:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Материал взят из зарубежного
Пожалуйста,
Войдите
или
Зарегистрируйтесь
для просмотра содержания URL!
. И представлен исключительно в ознакомительных целях.Удачных экспериментов вам!