Как сделать вкладки на странице сайта

Табы (Tabs) — это вкладки на одной странице сайта, которые экономят время и упорядочивают информацию. Я английского языка tabs — это ярлык, этикетка, лейбл. А нам в веб дизайне привычнее и понятнее называть их табами или вкладками. Но вкладки легче показать, чем объяснить.Пример вкладок для сайта

Это информация, которая выводится при нажатии на вкладку 1. Она может быть абсолютно любой
А это инфо вкладки 2. Информации может быть совсем любая даже картинка
Информация третьей вкладки. Вкладок может быть сколько угодно.


Этот пример и сам скрипт взят мною с сайта jQueary idTabs. Очень интересные сайт где много табов с примерами, очень советую.

И в этой статье мы будем разбирать только один, самый простой скрипт создания табов, но как по мне и его вполне достаточно для полета фантазии.

3 шага для создания вкладок на своем сайте.

Шаг 1 — JS

Первый шаг это подключение библиотеки jQuery. Для этого нужно скачать файл jquery.idTabs.min.js. Создать в корне сайте папку js и поместить скачанный файл в эту папку. Далее на странице, где будут использоваться Табы разместить следующий код после тега <body>:

Если вкладки будут использоваться на всех страницах сайта — лучше разместить этот код в шаблон страницы.

Для сайтов на Worpdress:
В редакторе темы (Консоль — Внешний вид — Редактор) найти файл, который отвечает за функции темы. Обычно это function.php, но, например, в моей теме это includes/theme-functions.php. В самом конце, перед закрывающим ?> вставить следующий код

Шаг 2 — HTML

Это непосредственно код скрипта вкладок.

Скрипт вкладок для сайта

Этот код Вы вставляете в то место страницы (или шаблона страницы) где Вы хотите, чтобы у Вас были вкладки. В ucoz удобно делать вкладки в шаблонах, а вместо информации вставлять соответствующие системные коды. Именно так я создала Блок описания товара в своем Скрипте Интернет-магазина.

Как видим сам код простой и изменить его не составит труда. Меняете названия вкладок по своему усмотрению. Наполняете абсолютно любой информацией, используя html-теги. Информации должна быть внутри соответствующих div-тегов.

Если Вы хотите добавить еще вкладки, то копируете и вставляете во Вкладках строчку <li><a href=»#tab3″>Вкладка 3</a></li>, а в Инфо строчку <div id=»tab3″>Инфо 3.</div>и меняете соответственно в обеих id, то есть tab3 на tab4 и так далее, если нужны еще вкладки.

Шаг 3 — CSS

С кодом постепенно стало ясно, но ведь вкладки должны иметь внешний вид, хотя бы такой как в примере! Для этого используем CSS Стили. Ниже приведены стили моего примера, на их основе Вы можете создать свои собственные, нужна только фантазия и совсем небольшие знания CSS :-).

Итак, копируем код, который ниже и вставляем его Панель Управления — Дизайн — Управление дизайном (CSS) в самый низ странцы.

Вкладки — изображения

В моем Скрипте Интернет-магазина Блок фотографий сделан тоже с помощью вкладок. Только в таком варианте веcь текст заменяют фотографии:


Разберем и этот скрипт.

HTML

Функция lightbox из кода ниже предусмотрена только для сайтов uCoz. То есть сам код рабочий, но функция lightbox будет работать только на сайтах uCoz. Для сайтов на WordPress вы можете скачать плагин Simple Lightbox и все будет работать. Но по сути в данном коде важна не эта функция, а сама структура вкладок.

Если Ваш сайт находится не на хостинге uCoz, тогда вместо $IMG_URL1$ (и т.д.) Вам нужно вставлять свои ссылки на фотографии.
Итак, принцип кода совершенно не поменялся, только вместо текста везде находятся соответствующие картинки. Во вкладках они маленькие, при показе больше, при нажатии на картинку — еще больше. Вы видите что один и тот же файл картинки расположен и во вкладке и в блоке

Таким образом, размер фотографии регулируется по ширине с помощью атрибута width и Вы сами можете менять его по желанию.

Если Ваш сайт находится не на хостинге uCoz, тогда вместо $IMG_URL1$ (и т.д.) Вам нужно вставлять свои ссылки на фотографии.

CSS

Табы не возможны без стилей. Ниже приведены стили, которые фигурируют именно в этом примере. Куда копировать стили на хостинге uCoz я уже писала в этой статье .

Про графические вкладки, когда вместо самой вкладки — изображение, читайте в статье Графические вкладки на сайт.

Я очень надеюсь, что я максимально объяснила как сделать вкладки на сайте, но если есть вопросы, пишите обязательно, я очень жду Ваших комментариев.


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

9 комментариев

  1. Наталья, помогите, пожалуйста, выровнять табы по краям.
    Дело в том, что если добавлять материал без табов, то он имеет такой вид (как и должно быть): http://i.piccy.info/i9/b396651e6e382f9c8188bccba2b80571/1448022084/20188/969308/bez_tabov.png
    Но когда добавляешь материал используя табы, то они почему-то смешаются вправо относительно текста и отступы от края (слева и снизу) становятся большие, чего быть не должно. Вот так:
    http://i.piccy.info/i9/ac4fb3589bf13b1de7462fee6da558e6/1448022218/20360/969308/taby.png
    Очень вас прошу, помогите вернуть табы на место, чтобы они не уходили туда, куда не надо!

  2. Насколько я понимаю, шаг 1 — подключение библиотеки jQuery, на Юкоз делать не надо? Так ведь? То есть, начинать надо сразу с шага 2?

  3. Скажите, пожалуйста, эти вкладки (табы), которые нарисованы на 1-ом изображении, подойдут для Юкоз? У вас тут про Вордпресс написано, а меня именно Юкоз интересует. Чтобы можно было в эти вкладки текст вставлять и видео.

  4. А вложенные вкладки будут работать?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *