что такое табы на сайте
Табы (вкладки) для сайта на CSS и JavaScript – 3 способа
В этой статье рассмотрим примеры вкладок для сайта, выполненных как с использованием только CSS, так и с применением JavaScript.
Что такое табы
На странице очень часто бывает необходимо вывести большое количество информации.
Для того чтобы эту информацию не отображать всю сразу, её можно разделить на части и выводить пользователю в определённый момент времени только одну из них.
Табы (вкладки) – это как раз и есть тот элемент интерфейса, который позволяет пользователю переключаться между контентом, разбитым на несколько определённых частей.
В вебе табы – это просто набор ссылок или других HTML элементов, которые визуально можно представить по-разному: в виде вкладок, группы кнопок и другими способами. По сути, они просто включают видимость какого-то одного блока с контентом, скрывая при этом другие.
Табы предназначены для экономии места и более удобного представления информации на сайте (по названию вкладки можно определить какой контент отобразится на странице, если нажать на неё).
Вкладки на чистом CSS
Рассмотрим несколько способов создания табов на CSS.
Первый способ построен на радиокнопках ( input с type=»radio» ) и CSS селекторе checked.
HTML и CSS код таба:
Отображение и скрытие контента, связанного с вкладками, выполняется очень просто. По умолчанию элементы, содержащие контент, не отображаются. Показ того или иного элемента с контентом осуществляется только в том случае, если селектор в следующем правиле позволяет выбрать его:
CSS код для создания адаптивных вкладок в виде кнопок:
В этом примере вкладки визуально представлены в виде хэштегов :
Второй способ основывается на использовании псевдокласса :target.
Пример HTML и CSS кода для создания адаптивных вкладок, механизм работы которых организован через :target :
Логика этих табов основана на следующих моментах. Первый момент заключается в добавлении хэша к URL-адресу страницы при нажатии на ссылку (вкладку). Второй – это стилизация элементов, выбор которых осуществляется в зависимости от хэша в URL-адресе. Выбрать элемент, идентификатор которого соответствует хэшу в URL-адресе в CSS можно выполнить посредством псевдокласса :target. С помощью него мы можем написать селектор не только для получения элемента, на который он указывает, но и для выбора других элементов, которые каким-то определённым образом связаны с ним.
Например, выбрать вкладку, которая должна быть активной для элемента на который указывает :target можно так:
В зависимости от дизайна проекта табы можно визуально представить так, как вам это нужно.
Например, чтобы сделать вкладки вертикальными их код можно изменить на следующий:
При этом табы отображаются вертикально только на больших экранах, а на маленьких (мобильных) они отображаются горизонтально. Адаптивность табов в коде реализуется с помощью медиа-запросов.
Табы с использованием JavaScript
В этом разделе разберём как можно создать табы на чистом JavaScript (без использования библиотеки jQuery).
Способ реализации вкладок с использованием JavaScript может потребоваться, когда в них нужно, например показывать динамический контент, получаемый через AJAX.
HTML и CSS код вкладок:
При этом инициализирован будет только первый контейнер с вкладками, имеющий указанный класс.
Для того чтобы на странице инициализировать сразу все вкладки, имеющие этот класс, можно, например, использовать следующий код:
Примеры
1. Пример, в котором данные о последней открытой вкладки таба будем сохранять в LocalStorage, а затем использовать эту информацию при открытии страницы для переключения на неё:
2. Пример синхронизации вкладок на разных открытых страницах, относящихся к одному источнику (через LocalStorage):
3. Пример, в котором показано как на одной странице можно вывести несколько табов с сохранением их состояний (активных вкладок) в LocalSorage:
4. Табы, содержащие видео с YouTube. При переходе на другую вкладку будет приостанавливаться воспроизведение текущего видеофайла.
Загрузку API IFrame Player будем выполнять асинхронно. Для этого напишем следующий код:
Создание и проигрывателя YouTube будем выполнять после загрузки кода API посредством функции onYouTubeIframeAPIReady :
Описание исходного JavaScript кода
Создание вкладок (табов). Урок 1
Дата публикации: 2013-10-10
От автора: в данном уроке мы с Вами поговорим о создании табов на сайте. Табы — это ни что иное, как вкладки, позволяющие вместить большой объем информации, используя минимальный объем места. Вкладки очень естественно смотрятся, к примеру, в интернет-магазинах. Там в них часто помещают информацию о товаре: характеристики, описание товара и т.д.
Библиотека jQuery UI предлагает нам виджет Табы (//jqueryui.com/tabs/), позволяющий с легкостью реализовать необходимый функционал. Однако, если вы не хотите подключать дополнительную библиотеку, если хотите реализовать вкладки, что называется с нуля, то данный урок как раз то, что вам нужно.
В данном уроке мы с вами создадим необходимую для табов разметку, а также напишем стили, позволяющие оформить табы соответствующим образом. При этом это не обязательно может быть «табовое» оформление… мы вполне можем использовать функционал урока для создания сайта-визитки, где контент страницы — это контент вкладки, ну а каждая конкретная вкладка — это ни что иное, как пункт меню. В общем, мы ограничены лишь нашей фантазией.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Итак, давайте начнем с разметки, которая может быть примерно такой:
Создание вкладок (табов) на сайте
Простейший способ создать универсальные вкладки на сайте с помощью html и jQuery
Вкладки на сайте встречаются довольно-таки часто. Особенно последние мои заказы прям пестрят ими. От чего не хочется каждый раз писать что-то новое, когда задача у них в основном одна и та же — группировка контента.
Поэтому я постоянно использую простенький скрипт из своего запаса, коим и покажу как сделать вкладки в html. Писал я его не сам. Однако ссылку на первоисточник предоставить увы не получиться, ибо вообще не помню откуда взял решение. Вроде бы где-то на форумах.
Тогда я ещё не знал JS в принципе, а сделать табы на сайте было нужно. Поэтому давайте опустим прелюдию и перейдём к реализации.
Создание HTML разметки вкладок
В общем, здесь у нас 2 основных контейнера: сами кнопки табуляции и их содержимое.
Если будет удобнее, то можете переопределить теги в кнопках по собственному усмотрению. Самое главное оставить классы. Вы можете сделать, например так:
В общем, подстраивайте все под свои нужды и структуру вёрстки. Все просто.
Заставляем вкладки работать с помощью jQuery
Для этого просто подключите файл jquery из вашего проекта или же просто скопируйте строку ниже и вставьте в html разметку сайта перед всеми подключёнными скриптами.
Там где прописано 1.11.1 в строке, можете заменить на необходимую версию jq.
Если вы будете использовать на странице вкладки несколько раз, то необходимо кое-чего дописать, чтобы правильно идентифицировать элементы. Для этого просто перед классами в скрипте пропишем класс основного контейнера в котором все лежит.
Стилизация вкладок
Ну и самое главное делитесь записью в соц. сетях. Это помогает раскрутке проекта.
Адаптивные вкладки (табы) на JavaScript
Ведь основном они идут для того, чтоб скрыть информацию или плеер, что можно наблюдать на тематике для просмотра кино в онлайн режиме. Где вашему вниманию еще одна чистая вкладка, которая будет автоматически конвертирована в интерфейс, как в горизонтальном, так и вертикальном положение аккордеона, что автоматически перейдут под мобильные аппараты.
Отлично продуманные навигационные вкладки не только помогают пользователям узнать, где и какая информация находится, а также служит навигацией по внутренним страницам.
Также проверяя на работоспособность и на мобильные гаджет, то разложу изображение, как реально выглядит на разном формате и безусловно ширине монитора или мобильного экрана.
Рассмотрим при открытие страницы или сайта.
Здесь наводит на одну из предоставленных разделов, где меняется оттенок.
Здесь можно заметить, что просматриваем с мобильных приложениях.
Вероятнее всего, что просмотр проходит самого небольшого экрана.
Простые адаптивные вкладки (табы) для сайта на 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, мы можем быстро вернуться из любой функции обратно в инициализатор. Ниже представлен код: