Как сделать табы на сайте
Простые адаптивные вкладки (табы) для сайта на JavaScript и CSS
Дата публикации: 2015-11-03
От автора: в данной статье мы рассмотрим, как сделать макет из нескольких адаптивных вкладок (табов) для сайта на JavaScript и CSS 3, который просто отлично подходит в тех случаях, когда необходимо вместить много связанного контента в маленькой и компактной области.
Часто вкладки можно встретить в блогах в виде виджетов сайдбаров, в которых, обычно, отображаются последние или любимые посты, или категории. Но помимо второстепенной роли вкладкам (табам) также отводят и главную роль на страницах. К счастью создавать вкладки (табы) для сайта не такое и сложное занятие. В этой статье мы рассмотрим все, что необходимо для их создания, даже позаботимся о устаревших браузерах с выключенным JS. Давайте разберем структуру и разметку вкладок.
Структура и разметка
Итак, наша структура включает в себя:
Секцию меню с вкладками. Активная вкладка подсвечивается
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
И сами вкладки, которые или спрятаны, или видны
Вся конструкция помещается в главный DIV, который будет использоваться в JS для нахождения дочерних элементов. Начнем разметку:
Значение для идентификатора можно взять любое, оно пригодится позже в JavaScript. Также обратите внимание на класс no-js, его мы будем удалять перед манипуляциями с JS. Если вы работали с библиотеками с методом обнаружения поддерживаемых свойств, как Modernizr, то вам это будет знакомо. Добавим меню:
Я сразу сделал первую вкладку активной, первый индекс в JavaScript будет 0. Обратите внимание на то, что количество вкладок может изменяться, но обязательно необходимо, чтобы количество табов и ссылок на них было равным. Перейдем к вкладкам: каждая вкладка это отдельный DIV. У первого блока сразу добавлен класс is-active. Конечная разметка выглядит так:
На данном этапе в браузере будет просто куча элементов в одном ряду, но мы это поправим в CSS.
Добавляем стили в CSS
Замечание: я использую flexbox, для автоматической генерации вендорных префиксов autoprefixer с Gulp. В CSS ниже я не писал вендорные префиксы. Если вам нужна готовая версия, она есть на GitHub. Блоки c-tabs как таковых стилей не требуют, так что начнем с меню. Меню у нас состоит из набора ссылок, ниже я добавил немного стилей:
Пройдемся по стилям меню. Основной контейнер это элемент flexbox с классом c-tabs-nav. Каждая ссылка это резиновый элемент с классом c-tabs-nav__link, который растягивается так, чтобы вместить все элементы с небольшими отступами между ссылок. На каждую ссылку вешается событие клика для переключения между вкладок. Также ссылки будут менять свое состояние в зависимости от того, навели на них мышку или кликнули. В демо у каждой ссылки своя иконка и текст в тегах I и span соответственно. На маленьких экранах текст в span скрывается для экономии места. Сделать это можно простым медиа запросом, который мы добавим в конец файла.
Теперь рассмотрим стили для конкретной вкладки:
Ну тут все просто и интуитивно понятно, но все же пройдемся поэтапно. Каждому табу присвоен класс c-tab, все вкладки спрятаны по умолчанию (display: none). Если к элементу добавляется класс is-active, то значение свойства display меняется на block. Класс c-tab__content отвечает за область контента внутри вкладки, функциональной нагрузки он не несет. Хотя через него можно напрямую обращаться ко вкладкам, не трогая основной контейнер.
На данном этапе у вас на экране уже должно быть что-то привлекательное. Но по клику по ссылкам меню ничего не происходит! Без паники, сейчас исправим.
Вдохнем жизнь при помощи JS
Давайте поэтапно распишем, чего мы хотим добиться с помощью JS:
Нам необходимо каким-то образом найти компоненты, чтобы потом их настроить
Нужно как-то инициализировать компоненты
Необходимо проверить, на все ли вкладки навешены обработчики события
Нам нужен метод для перехода к указанной вкладке, который можно вызывать как внутри, так и из разметки
И в конце концов, нужно получить доступ к нашим компонентам, т.е. необходимо добавить их в глобальное пространство имен
Теперь настроим нашу функцию и сделаем ее глобальной:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Обратите внимание, что функция tabs принимает один аргумент option. Добавим пару переменных в кэш, сделав их доступными для следующей нашей функции:
Мы инициализировали пять переменных:
El – содержит элемент, найденный по селектору через option
tabNavigationLinks – коллекция ссылок меню с определенным классом, полученных через option
tabContentContainers – контент вкладок с определенными классами, полученный через option
activeIndex – индекс активной вкладки, по умолчанию равен 0
initCalled – булево значение, по умолчание равно false. Используется для проверки, вызывалась ли функция init, т.к. более одного раза данную функцию вызывать не нужно.
Подумаем дальше. Нам нужна какая-то функция, которая будет пробегаться по всем ссылкам вкладок и вешать на них обработчики событий, а также удалять класс no-js. И, естественно, нужна функция для обработки этих событий. И, наконец, нужна функция, которая будет переключать нас на заданную вкладку по ее индексу, которая будет вызываться из функции обработчика. Забегая наперед, нам нужно сделать так, чтобы функцию инициализации и функцию по переходу на конкретную вкладку можно было вызывать в любом месте. Благодаря нашему JS и переменной initCalled со значением по умолчанию false, мы можем быстро вернуться из любой функции обратно в инициализатор. Ниже представлен код:
Простой jQuery-скрипт для табов (вкладок)
Самый простой пример реализации табов на сайте. Код максимально простой и легкий, не нужно никаких сторонних библиотек (кроме jquery) и никакого лишнего громоздкого кода. Весь HTML можно поменять под свою верстку, только не забудьте тогда поменять и код в скрипте, и в CSS.
HTML для табов
Обязательные CSS-стили для вышеуказанного HTML-кода
Для красивого отображения на сайте нужно использовать свои стили.
Подключаем jQuery перед скриптом
JS-скрипт для табов
Данный код вы помещаете в свой файл скриптов, если такого нету, то создаете его, например, scripts.js и подключаете после jquery таким образом:
Пример табов, в котором запоминается активная вкладка после перезагрузки страницы (с помощью cookie)
Пример табов, в котором запоминается активная вкладка после перезагрузки страницы (с помощью cookie). HTML и CSS остается тот же, меняется только скрипт.
Пример табов, в котором запоминается активная вкладка после перезагрузки страницы (с помощью localStorage, меньше кода по сравнению с cookie)
Пример табов, в котором запоминается активная вкладка после перезагрузки страницы (с помощью localStorage, меньше кода по сравнению с cookie). HTML и CSS остается тот же, меняется только скрипт.
Пример табов, в котором при переходе по ссылке с якорем, указывающим на номер таба, активируется соответствующий таб
Пример табов, в котором при переходе по ссылке с якорем, указывающим на номер таба, активируется соответствующий таб. HTML и CSS остается тот же, меняется только скрипт.
Полностью рабочий пример jquery-табов со своими стилями в вертикальном и горизонтальном виде:
Сам скрипт целиком и полностью взят с сайта dimox.name
Комментарии (20) к “Простой jQuery-скрипт для табов (вкладок)”
Evgeniya
Aleksander
После перебирания мегатонн говнокода наконец то я нашла НОРМАЛЬНЫЙ легкий корректный код и видит Всевышний, я не люблю плагиат, но я только учусь, а сама так не написала бы. Надеюсь, вы не очень сердитесь. что я его позаимствовала и зверски расковыряла) Но даже это он пережил и позволил реализовать табы в табах. Большое человеческое спасибо.
Alexander
Огромное Вам спасибо! Вы мне сэкономили кучу времени!
А как сделать так что бы вкладка после обновления страницы оставалась на том же?
Denis Creative
Нужно использовать немного другой скрипт, с использованием localStorage:
Руслан
Привет не подскажете? использую последний код для активации таба после перехода по ссылке с якорем но активируется только 2 таб, не могу понять в чем проблема
Denis Creative
Попробуйте такой HTML:
Я проверил, вроде бы работает.
Здравствуйте.
Спасибо за материал.
Подскажите, пожалуйста, как дополнительно сделать, чтобы при переходе по ссылке несколько элементов с табами переключались?
Чтобы понятнее было: у меня 5 блоков, в каждом по 3 вкладки. Над ними 3 кнопки. Необходимо, чтобы по нажатию кнопки 1-3, раскрывались табы 1-3.
Вариант с якорем, к сожалению, раскрывает только 1ый элемент.
Почемуто Четвертая вкладка через букву р(Червертая ) 🙂 самое смешное что по ссылке оригинала тоже самое:)
Denis Creative
Ну я не писал этот код с нуля) Спасибо за замечание, исправил.
Георгий
только я хотел позаимствовать ваш вариант табов, но… в мобильной версии, когда из-за маленькой ширины экрана закладки встают друг над другом, чтобы выбрать таб, надо нажимать на 50px ниже, чем его закладка находится 🙂 садитесь, два =(
Denis Creative
1. Скрипт рабочий.
2. Стили для мобильного вы можете написать любые.
3. В примере стили и скрипты упрощены до минимума, чтобы понять логику скрипта.
Если вы не можете поправить стили для мобильного, а только копируете и вставляете код, то вам следует немного подучиться.
Степан
Спасибо за самый рабочий и минималистичный пример!
Но вот такой вопрос: А можно ли при 3-4 вкладках сделать некоторые из них неактивные?
Denis Creative
Это как. Можно подробнее?
Степан
Прошу прощения за столь долгий ответ. Проблему я уже решил.
Например, на сайте всегда присутствует несколько разделов (3-4), но на определенных страницах некоторые из разделов не имеют информации, и эти разделы необходимо скрыть, не скрывая кнопки. Решение простое – сделать неактивными сами кнопки (спокойно делается через CSS).
Но вот другой вопрос: на странице есть заголовки, на которые можно перейти в меню разделов. За меню и заголовками закреплены определенные id.
Также на этой странице присутствует несколько вкладок. Как сделать, чтобы меню тоже менялось при смене вкладок?
Просто заметил особенность – скрипты и даже стандартные переходы по разделам не работают уже на 2 вкладке. На 1 все в порядке.
Denis Creative
Добавьте пример на codepen.io – там будет понятнее, какие блоки существуют и как они выглядят, что должно происходить.
Степан
Как я уже говорил, есть разделы, и есть меню, отвечающее за быстрый переход по ним. Скрипт отвечает за плавность этого перехода.
Загвоздка в том, что в моем случае вкладки используются для, практически, одного и того же контента, за исключением некоторых блоков. В пример можно привести сайт с полезным советом для установки чего-либо. Один раздел отводится для Windows, другой для MacOS – чтобы пользователь знал, как действовать на любой из систем. Основные шаги одинаковые, но пути и некоторые действия различаются.
И почему-то никакие скрипты, работающие на 1 вкладке, не хотят работать ни на 2, ни на любой другой вкладке. Поэтому я подумал про смену контента в меню разделов, чтобы заменить id (ведь, скорее всего, для продублированного контента невозможно применить один и тот же скрипт). К слову, в моем проекте контент находится в теге article, а меню разделов – в теге aside.
Поэтому повторю вопрос: как сделать смену контента не только для основного блока, но и какого-нибудь другого на странице?
P.S.
Пока писал, нашел решение для смены меню разделов каждой вкладки. Просто меню вставить внутрь контента, немного поменяв стили… Но проблема с нерабочими скриптами на других вкладках остается актуальной.
Denis Creative
Интересно посмотреть на живой пример.
Denis Creative
Получил пример на почту.
1. На всей странице не должно быть одинаковых id – они уникальны и у каждого элемента должен быть свой id – это важно, из-за это и не работало меню.
2. Нужно проверять консоль в браузере на предмет ошибок, в вашем примере были ошибки в консоли, я убрал часть кода, чтобы упростить и показать пример.
3. Более правильно будет вынести правое меню внутрь каждого таба со своими id и своими ссылками для этих id.
4. Не совсем правильно, но чуть проще по верстке и чуть сложнее по скриптам я выслал код на почту. Там меню боковое остается одно, но при разных активных табах в этом меню подменяются ссылки для каждого активного Таба со своими уникальными ID.
Делаем адаптивные табы без javascript и грязных хаков
В продолжение предыдущего поста про стилизацию элементов выбора, хотел бы рассказать как сделать полностью адаптивные табы без использования javascript, абсолютного позиционирования и хаков с ссылками.
Для начала хотел бы сказать, что я не призываю отказаться от javascript в пользу лишь CSS, ниже будет представлен лишь один из способов реализации табов. Существует множество ситуаций, когда такой подход вам не подойдёт и где без JS не обойтись, но сейчас не об этом.
Давайте поймём что мы хотим видеть в качестве результата работы и какие требования мы выдвигаем к нему:
Визуально должно получиться что-то подобное:
Перед тем как показать свой вариант табов без JS, я хотел бы рассказать о некоторых вариантах реализаций, которые я нашёл в процессе решения этой задачи.
Вариант первый
Человек придумавший этот способ либо явно хотел поиздеваться над пользователями, либо он один из посетителей реддита, который создавал те самые «удобные» регуляторы громкости. У меня подобный подход вызывает нервный тик.
Суть метода заключается в следующем:
Как вы могли заметить мы имеем кое-какие проблемы с использованием данного метода:
Делаем оправданный вывод: этот метод нам не подходит так как не удовлетворят большей части требований. Реализации ужасная и я не советовал бы её использовать.
Вариант второй
Вот как это работает:
Как вы могли заметить, в этом примере мы используем position: absolute; для того, чтобы разместить заголовки вкладок сверху, а контент вкладки снизу. Это создаёт определённые проблемы:
Конечно, в некоторых случаях этот метод можно применять, на пример, когда вы заранее знаете количество вкладок и объём контента внутри них. Но мы ищем универсальное решение, поэтому данный подход не применим в нашем случае.
Решение
Третий вариант, и он же решение, является модификацией второго метода. Работает он точно так же, однако мы не будем использовать абсолютное позиционирование и свойство float для заголовков.
Данный подход работает во всех современных браузерах, включая мобильные. Из, непривычных для многих, свойств используется только Flexbox, а он уже давно имеет широкую поддержку. В браузерах FireFox, Chrome, Safari и Opera мною не было обнаружено каких-либо проблем с работой вкладок.
Я добавил немного стилей, чтобы вкладки выглядели поинтересней.
Вы можете проверить данный подход на jsfiddle, или на своих проектах. Буду рад увидеть и другие предложения решений данной проблемы в комментариях.
Табы на JQuery и JavaScript
Можете посмотреть демо чтобы увидеть как будет выглядеть результат. В колонке JS сверху расположен код JQuery, ниже JavaScript.
В самом начале объясню схему, по которой мы будем делать табы:
Про приставку js.
Мы добавляем отдельный класс для манипуляций из js потому что, на один класс могут быть завязаны стили, которые в дальнейшем могут быть заменены. Приставка js даст вам или другому разработчику понять что этот элемент, в частности класс, участвует в интерактивности, на нем завязаны только события javascript. Таким образом этот класс всегда будет у элемента, не смотря на стили.
В нескольких проектах я это правило игнорировал и потом на исправление багов я тратил время.
Первым делом создадим разметку для наших табов.
Первой вкладке и её содержимому мы добавили класс active, чтобы по-умолчанию эти два элемента были активны. Остальные вкладки оставляем неактивными, а блоки с контентом скрываем.
Стилизовать — дело вкуса, если вы не против я стилизовал на свой вкус.
Здесь мы определили вид наших вкладок и контенеров с содержимым. Важным для понимания будут стили для вкладок, активной вкладки, контенеров, активного контейнера.
Тут все довольно просто. Активной вкладке добавляем изменение цвета, остальные остаются с серым цветом. Активный блок показываем, остальные скрываем.
Разберем Jquery код:
Итак, первое что нужно сделать, обработак клик по каждому элементу.
Теперь нам нужно получить идентификатор нашей вкладки и найти контент с таким же значением data-tab.
Отлично, теперь мы знаем и вкладку по которой мы кликнули и контейнер с содержимым этой вкладки. Теперь дело за малым, поработать с классами. Дополним наш предыдущий код.
Вот и все, код на JQuery занял у нас всего лишь 10 строк кода. Рассмотрим JavaSсript.
Код на JavaScript не сложнее чем jquery код. Когда я начинал знакомиться с JQuery, в одном из проектов она не хотела работать, там была сложная структура битрикс сайта и я потратил много времени чтобы заставить её работать. После безрезультатных попыток я психанул и написал табы на JavaScript, до этого я боялся его, но написав табы без JQuery удивился, это не так сложно как кажется.
Разберем JavaScript код:
Прежде чес обработать клик по вкладке, объявим несколько переменных для наших вкладок и контенеров с содержимым.
Теперь можно обработать клик по вкладкам.
Теперь в функции-обработчике объявим несколько переменных для удобной манипуляции. Все можно сделать и без переменных, но мы будем делать по-хорошему.
В заключении поработаем с классами:
Как сделать адаптивные табы (вкладки) на css без использования скриптов
Добрый вечер! Сегодня я вам расскажу, каким образом можно сделать табы (вкладки) на чистом css3 без какого-либо использования jquery или других скриптов. Как вы уже знаете, чем меньше вы будете использовать скриптов, тем лучше для вашего сайта, и тем быстрее он будет работать. А скорость сайта сегодня один из самых важных показателей его ранжирования в поисковых системах.
Адаптивные вкладки (табы) на чистом css и без скриптов
Сегодня табы есть практически на любом сайте. Они необходимы для того, чтобы отображать несколько областей контента без перехода пользователя на другие страницы. Например, на одном из моих проектов по разработке интернет-магазина на Joomla было добавление двух табов, которые будут отображать по 3 товара двух типов: «хиты продаж» и «последние». Принято решение делать их на чистом css без перезагрузки сайта ненужными скриптами.
HTML код для табов с использованием css3 по пунктам
1. В первую очередь нам необходимо создать div с классом «tabs».
2. Добавляем непосредственно кнопки-переключали с именем «tabs», при нажатии на которые они будут включать содержимое наших табов.
type = «radio» name = «tabs» id = «tab-first» checked >
3. Добавляем их название через label
4. Под кнопками, которые мы с Вами сделали в пунктах 1-3, мы добавляем уже непосредственно контент, который нам нужно выводить. В моем случае это три последних товара и три лучших товара.
Каждый блок у нас имеет класс tab-content и идентификаторы tab-content-1 и tab-content-2.
Итоговый HTML наших будущих табов
На этом мы закончили с написанием нашего html. Согласитесь, ничего сложного тут не было. Итак, идем дальше.
CSS стили для табов с использованием css3 по пунктам
Теперь самое интересное и сложное. Нам нужно наши табы сделать табами, которые будут переключаться при клике 🙂
Так как у нас будет два таба, то нам нужно назначить им такую ширину, чтобы они помещались на экране и не вылазили за его черту. Для этого мы прописываем ширину 50%. Если у вас будет другое число табов, то и ширину рассчитывайте отталкиваясь от их числа.
Также, обратите внимание, что по умолчанию, мы делаем наши кнопки-переключатели невидимыми
Как заставить это работать
Добавляем следующий css код
Строками выше мы добавляем особы стиль для активного таба используя :checked + label
Далее мы уже проверяем, какой наш переключатель имеет статус checked и отображаем содержимое, которое у нас прикреплено за ним, используя его id.
#tab-content-1 — данная строка говорит о том, что нам нужно отобразить контент, который имеет id=»tab-content-1″, если tab-first имеет статус checked.
Делаем наши табы адаптивными
Ну вот по сути и все. Наши табы готовы :). Вы их можете менять как угодно, добавлять-удалять. Спасибо за внимание 🙂