fbpx
Перейти к содержимому

Как сделать вкладки на сайте | Табы для сайта

Табы для сайта (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

Это непосредственно код скрипта вкладок.
Этот код Вы вставляете в то место страницы (или шаблона страницы) где Вы хотите, чтобы у Вас были вкладки.
Скрипт вкладок для сайта состоит из 2 частей
1. HTML

Больше статей:   Вкладки для Wordpress без плагина - Табы для сайта Вордпресс

2. JS
Сразу под кодом HTML вставить:
<script type=»text/javascript»> $(«#usual1 ul»).idTabs(); </script>

Внимание, для сайтов WordPress код чуть другой:

Теперь у вас на сайте должны появится вкладки.

В 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 я уже писала в этой статье .

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

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

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
    Очень вас прошу, помогите вернуть табы на место, чтобы они не уходили туда, куда не надо!

    1. Екатерина, Попробуйте убрать:

      6-я строчка в стилях.

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

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

    1. По идее и именно так. Вы попробуйте. Если что, подключите библиотеку. Просто я давно уже не работаю на uCoz. Возможно произошли изменения.

      1. Я была не права. На Юкозе шаг 1, с установкой jquery.idTabs.min.js, тоже надо делать, иначе табы работать не будут.
        Кстати, классные вкладки получились. Спасибо! И у вас хороший сайт.

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

Добавить комментарий для Natalie - Web First Step Отменить ответ

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