Как сделать табы jquery

Табы на JQuery и JavaScript

Даниил Постнов

Nov 23, 2018 · 5 min read

В самом начале объясню схему, по которой мы будем делать табы:

Про приставку js.
Мы добавляем отдельный класс для ма н ипуляций из js потому что, на один класс могут быть завязаны стили, которые в дальнейшем могут быть заменены. Приставка js даст вам или другому разработчику понять что этот элемент, в частности класс, участвует в интерактивности, на нем завязаны только события javascript. Таким образом этот класс всегда будет у элемента, не смотря на стили.

В нескольких проектах я это правило игнорировал и потом на исправление багов я тратил время.

Первым делом создадим разметку для наших табов.

Стилизовать — дело вкуса, если вы не против я стилизовал на свой вкус.

Здесь мы определили вид наших вкладок и контенеров с содержимым. Важным для понимания будут стили для вкладок, активной вкладки, контенеров, активного контейнера.

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

Разберем Jquery код:

Итак, первое что нужно сделать, обработак клик по каждому элементу.

Теперь нам нужно получить идентификатор нашей вкладки и найти контент с таким же значением data-tab.

Отлично, теперь мы знаем и вкладку по которой мы кликнули и контейнер с содержимым этой вкладки. Теперь дело за малым, поработать с классами. Дополним наш предыдущий код.

Вот и все, код на JQuery занял у нас всего лишь 10 строк кода. Рассмотрим JavaSсript.

Код на JavaScript не сложнее чем jquery код. Когда я начинал знакомиться с JQuery, в одном из проектов она не хотела работать, там была сложная структура битрикс сайта и я потратил много времени чтобы заставить её работать. После безрезультатных попыток я психанул и написал табы на JavaScript, до этого я боялся его, но написав табы без JQuery удивился, это не так сложно как кажется.

Разберем JavaScript код:

Прежде чес обработать клик по вкладке, объявим несколько переменных для наших вкладок и контенеров с содержимым.

Теперь можно обработать клик по вкладкам.

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

В заключении поработаем с классами:

Вот и все! Спасибо вам за прочтении статьи.
Если понравилось — поставьте лайк, если нет — напишите почему в комментариях.

Источник

Простые табы для сайта на jQuery, бывает еще проще?

без использования хэшей,

Текущий вариант реализации:

А можно сделать CSS лаконичнее?

Демо, которое можно форкать.

65fd84964f465efe0de38c837aa22586

За ссылки с href=# надо отрывать руки. Что это за ссылка, которая никуда не ведет? Далее, при отключенном яваскрипте у вас будет пустая страница. далее, зачем тянуть 150-Кб тяжелый фреймворк, от которого айфон подвисает, ради табов?

Далее. Вот у вас написано

Что, если внутри сождержимого таба есть еще дивы? А если внутри таба есть еще один блок табов? А?

Далее, а что если табов больше 3-х?

Сделано на троечку, на уровне школьника, который впервые прочел сайт htmlbook.ru и захотел что-то сотворить. С кучей ошибок. Плохо, короче говоря.

И что значит «без использования хешей»? Это почему еще?

К слову, табы можно сделать вообще без яваскрипта, но вам видимо еще до этого далеко. Также, верстку табов можно сделать семантичнее — погуглите, у Сергея Чикуенка была статья на эту тему.

> А можно сделать CSS лаконичнее?

Его вообще можно убрать.

За ссылки с href=# надо отрывать руки.

и да, про селектор верно — стоило бы использовать, указывающий на прямых детей:

> стоило бы использовать, указывающий на прямых детей:

А еще хак для его эмуляции в Ие6 с 2 звездочками 🙂 (хотя мне конечно страшно такие хаки юзать, говорят, звездочка тормозит, а 2 звездочки вообще старичка ИЕ могут наверно уронить).

65fd84964f465efe0de38c837aa22586

>За ссылки с href=# надо отрывать руки.
Это не продакшн код, это ПРИМЕР, вам больше нравится href=»javascript:;»?

>Что, если внутри сождержимого таба есть еще дивы?
Добавлю сверху класс tab_item и напишу
#wrapper div.tab_item < display:none; >
#wrapper div

>зачем тянуть 150-Кб тяжелый фреймворк, от которого айфон подвисает, ради табов?
Я не собираюсь писать страницы для айфонов, мне от Jq нет смысла отказываться.

>А если внутри таба есть еще один блок табов?
Выкрутимся как-нибудь 🙂 Не собираюсь писать универсальное решение там, где это не нужно.

>Далее, а что если табов больше 3-х?
Да хоть 10, вот пример

>… на уровне школьника, который впервые прочел сайт htmlbook.ru и захотел что-то сотворить.
>С кучей ошибок. Плохо, короче говоря.
Спасибо, ваше мнение очень важно для меня. Приведите свое решение здесь.

>И что значит «без использования хешей»? Это почему еще?
я имел в виду анкоры (якоря), просто у меня анкоры используются для других задач.

> вообще без яваскрипта, но вам видимо еще до этого далеко
Куда уж мне 🙂

>А можно сделать CSS лаконичнее? Его вообще можно убрать
Отличная идея, верстальщик мне спасибо скажет 🙂

Источник

Универсальный jQuery-скрипт для блоков с вкладками (табами)

Вступление

tabsМое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге.

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

Почему я называю свой новый скрипт для jQuery-вкладок универсальным:

Что ж, хватит сухих слов, переходим к сути.

Код jQuery-скрипта для переключаемых блоков с вкладками

Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами и ):

Я предпочитаю “брать” его с Гугла, поскольку, во-первых, велика вероятность, что у посетителя, который зайдет на сайт, jQuery уже закэширован в браузере (значит страница загрузится быстрее), во-вторых, скорость серверов Гугла стабильна и быстра, в-третьих, Гугл отдает его в сжатом виде (gzip), и, например, для версии 1.4.2 размер составляет всего 24 килобайта по сравнению с несжатым файлом (70 Кб).

Вот такой у меня получился скрипт:

Добавлено 07.03.2010 (обновлено 09.04.2015)

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

Скачать

Универсальный jQuery-скрипт для блоков с вкладками

Загрузок: 26591 | Размер: 15 Кб

Если вы желаете отблагодарить автора финансово, воспользуйтесь следующей формой, указав произвольную сумму рублей:

HTML-код, который нужно использовать для скрипта

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

Обязательные CSS-стили для вышеуказанного HTML-кода

Примеры

P.S. Мне в твиттере как-то сказали, что я “изобретаю колесо”, что такой скрипт уже есть в jQuery UI. Ну и пусть, пусть я “изобрел колесо”, главное, что я получаю большое удовольствие от данного процесса и одновременно повышаю свой опыт в jQuery. Разве это плохо? =)

Требуется разработка печатного каталога товаров или услуг? Создание каталога в студии «Верстаем.ru» это оптимальное решение!

Источник

Табы (вкладки) для сайта на CSS и JavaScript – 3 способа

f2409a04b785f39f066901bb9f243868

tabs for site on css js

В этой статье рассмотрим примеры вкладок для сайта, выполненных как с использованием только CSS, так и с применением JavaScript.

Что такое табы?

На странице очень часто бывает необходимо вывести большое количество информации.

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

Табы (вкладки) – это как раз и есть тот элемент интерфейса, который позволяет пользователю переключаться между контентом, разбитым на несколько определённых частей.

В вебе табы – это просто набор ссылок или других HTML элементов, которые визуально можно представить по-разному: в виде вкладок, группы кнопок и другими способами. По сути, они просто включают видимость какого-то одного блока с контентом, скрывая при этом другие.

Табы предназначены для экономии места и более удобного представления информации на сайте (по названию вкладки можно определить какой контент отобразится на странице, если нажать на неё).

Вкладки на чистом CSS

Рассмотрим несколько способов создания табов на CSS.

Первый способ построен на радиокнопках ( input с type=»radio» ) и CSS селекторе checked.

HTML и CSS код таба:

1

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

CSS код для создания адаптивных вкладок в виде кнопок:

2

В этом примере вкладки визуально представлены в виде хэштегов :

6

Второй способ основывается на использовании псевдокласса :target.

Пример HTML и CSS кода для создания адаптивных вкладок, механизм работы которых организован через :target :

3

Логика этих табов основана на следующих моментах. Первый момент заключается в добавлении хэша к URL-адресу страницы при нажатии на ссылку (вкладку). Второй – это стилизация элементов, выбор которых осуществляется в зависимости от хэша в URL-адресе. Выбрать элемент, идентификатор которого соответствует хэшу в URL-адресе в CSS можно выполнить посредством псевдокласса :target. С помощью него мы можем написать селектор не только для получения элемента, на который он указывает, но и для выбора других элементов, которые каким-то определённым образом связаны с ним.

Например, выбрать вкладку, которая должна быть активной для элемента на который указывает :target можно так:

В зависимости от дизайна проекта табы можно визуально представить так, как вам это нужно.

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

4

При этом табы отображаются вертикально только на больших экранах, а на маленьких (мобильных) они отображаются горизонтально. Адаптивность табов в коде реализуется с помощью медиа-запросов.

Табы с использованием JavaScript

В этом разделе разберём как можно создать табы на чистом JavaScript (без использования библиотеки jQuery).

Способ реализации вкладок с использованием JavaScript может потребоваться, когда в них нужно, например показывать динамический контент, получаемый через AJAX.

HTML и CSS код вкладок:

5

При этом инициализирован будет только первый контейнер с вкладками, имеющий указанный класс.

Для того чтобы на странице инициализировать сразу все вкладки, имеющие этот класс, можно, например, использовать следующий код:

Примеры

1. Пример, в котором данные о последней открытой вкладки таба будем сохранять в LocalStorage, а затем использовать эту информацию при открытии страницы для переключения на неё:

2. Пример синхронизации вкладок на разных открытых страницах, относящихся к одному источнику (через LocalStorage):

3. Пример, в котором показано как на одной странице можно вывести несколько табов с сохранением их состояний (активных вкладок) в LocalSorage:

Описание исходного JavaScript кода

Источник

Аккордеон вкладки (табы) на jQuery

Дополнительное видео

e7444ad3559f3c50ad3c2543e337c954

fc5a19879d7f3ee5a8073caaeedb9acd

b4722cd44a1e5c8548e1a6ab0efec55e

f62b1293157d6a34f8e274c43d0fb591

4567c9c42b26cc81da76943a37e66c50

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

Описываем каркас Аккордеон вкладок

Прописываем заголовок, в котором при помощи тега strong оформим его часть другим цветом.

Это мы сделали одну панель, по такому подобию путем копирования мы делаем остальные, но прежде чем их создавать предлагаю оформить текущие блоки, а затем путем копипаста сделаем остальные.

Описываем CSS

Делаем размер шрифта в 15 пик. цветом немного по светлее и строчный интервал зададим 1.4. Таким образом, мы задали текстовое оформление внутри нашего блока.

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

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

Начинаем с ссылок, делаем жирность у них поменьше, убираем подчеркивание.

То есть, логика такая, что бы не дублировать стили на странице мы сразу их описываем для основного родите, а далее дочерние элементы их все унаследуют.

Для заголовка уберем жирность, сделаем его немного темнее основного текста, увеличим до 28 пик., делаем его заглавными буквами. Весь текст в теге strong выделим синим цветом.

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

Далее задаем внутренние отступы по краям. Иконку в ссылке увеличим немного в размере, и так как иконки разные по ширине будут и текст заголовка из за этого может плавать. Зададим иконке ширину в 30 пик. Тем самым обеспечим ровное выравнивание заголовка от левого края.

Затем при помощи псевдоэлемента вставим еще одну иконку в конец панели, она будет являться индикатором развернутости и свернутости второго блока. Для этого ссылке добавим position: relative и при помощи псевдоэлемента after вставляем иконку.

Первый блок мы предварительно оформили, теперь переходим к оформлению блока panel-collapse с текстовым содержанием.

Так как параграфа унаследовали основной стиль блока, переходим к оформлению заголовка пятого уровня. Сделаем его в 20 пик и уменьшим немного отступы сверху и снизу.

Зададим для них свои отступы и у списков уберем маркер, а в место них добавляем иконку.

И остается последнее, когда панель не активна, то есть по ней не произведен клик, класса IN нет, иконка развернута и весь текст скрыт.

Для этого блоку panel-collapse присваиваем display: none, а далее напишем скрипт, который будет отображать, и добавлять класс для нашего блока.

Пишем JS script для Аккордеона

Буквально двумя строчками мы достигли такой анимации.

Затем продублируем несколько раз панели, которые будут идти ниже, и видим, что не хватает между ними отступов. Добавляем его для блока panel-heading в 5 пик. Далее развернем, видим что после кнопки тоже нужны отступы. Зададим их при помощи padding в 20 пик.

Далее продублируем панели и изменим у них внутри контент.

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

Сейчас на данный момент ширина блока с табими растягивается на всю область экрана. Если хотите ее ограничить, задаете для блока main фиксированную ширину. Так же сделаем табы по наведению меняли цвет.

В принципе, таким простым способом можно создать анимированные вкладки, притом количество и содержимое их может разнообразить самостоятельно.

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

Источник