Как сделать таб, в котором будет таб, в котором будет таб?
Как сделать эту немного комическую цепочку в заголовке?
Необходимо, чтобы был таб, в котором есть два-три таба, затем в каждом из них еще по табу, в которых есть контент, глубина вложенности, которых не ограничена.
Сделал садистскую разметку, но работает!) В скрипте надо было всего чуть докрутить.
То же самое без jQ:
Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript html css jquery или задайте свой вопрос.
Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.6.10.42345
Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Табы (вкладки) для сайта на CSS и JavaScript – 3 способа
В этой статье рассмотрим примеры вкладок для сайта, выполненных как с использованием только CSS, так и с применением JavaScript.
Что такое табы
На странице очень часто бывает необходимо вывести большое количество информации.
Для того чтобы эту информацию не отображать всю сразу, её можно разделить на отдельные части, а затем выводить в определённый момент времени только одну порцию этих данных.
Табы (вкладки) – это как раз и есть тот элемент интерфейса, который позволяет пользователю переключаться между контентом, разбитым на несколько секций.
В вебе табы – это просто набор ссылок или других HTML элементов, которые визуально обычно оформляют в виде вкладок или группы кнопок. При нажатии ни них они включают видимость одного какого-то блока с контентом и скрывают другие.
Табы предназначены для экономии места и более удобного представления информации на сайте (по названию вкладки можно определить какой контент отобразится на странице, если нажать на неё).
Вкладки на чистом CSS
Рассмотрим несколько способов создания табов на CSS.
Первый способ построен на радиокнопках ( input с type=»radio» ) и CSS селекторе checked.
HTML и CSS код таба:
В этом варианте радиокнопки связаны с определённым label . Связь элемента label с input выполнена через атрибут for . Это действие необходимо для того, чтобы можно было скрыть элементы input , а управление ими (установку checked ) выполнять через клики по элементам label .
Стилизация выбранного элемента label в этом примере выполнена с использованием селектора input[type=»radio»]:checked+label . Этот селектор выбирает элемент label , который расположен сразу же после элемента input[type=»radio»] , находящимся в состоянии checked .
Отображение и скрытие контента, связанного с вкладками, выполняется очень просто. По умолчанию элементы, содержащие контент, не отображаются. Показ того или иного элемента с контентом осуществляется только в том случае, если селектор в следующем правиле позволяет выбрать его:
Отобразить вкладки можно по-разному. В следующем примере они визуально отображаются как кнопки .
CSS код для создания адаптивных вкладок в виде кнопок:
В этом примере вкладки визуально представлены в виде хэштегов :
Второй способ основывается на использовании псевдокласса :target.
Пример HTML и CSS кода для создания адаптивных вкладок, механизм работы которых организован через :target :
Логика этих табов основана на следующих моментах. Первый момент заключается в добавлении хэша к URL-адресу страницы при нажатии на ссылку (вкладку). Второй – это стилизация элементов, выбор которых осуществляется в зависимости от хэша в URL-адресе. Выбрать элемент, идентификатор которого соответствует хэшу в URL-адресе в CSS можно выполнить посредством псевдокласса :target. С помощью него мы можем написать селектор не только для получения элемента, на который он указывает, но и для выбора других элементов, которые каким-то определённым образом связаны с ним.
Например, выбрать вкладку, которая должна быть активной для элемента на который указывает :target можно так:
В зависимости от дизайна проекта табы можно визуально представить так, как вам это нужно.
Например, чтобы сделать вкладки вертикальными их код можно изменить на следующий:
При этом табы отображаются вертикально только на больших экранах, а на маленьких (мобильных) они отображаются горизонтально. Адаптивность табов в коде реализуется с помощью медиа-запросов.
Табы с использованием JavaScript
Сейчас разберём как можно создать табы на чистом JavaScript (без использования jQuery и каких-либо других библиотек).
Способ реализации на JavaScript может потребоваться для решения задач, которые просто невозможно решить на CSS. Например, когда нужно загружать контент динамически (через AJAX) в момент открытия вкладки.
JavaScript (с использованием классов):
Инициализация табов на странице осуществляется посредством создания нового объекта типа ItcTabs и передаче ему в качестве аргумента CSS-селектор или DOM-элемент которой необходимо инициализировать как табы.
Если в качестве аргумента указать селектор класса, то в качестве табов будет инициализирован только первый элемент.
Для того чтобы на странице инициализировать несколько вкладок, можно использовать следующий код:
Кроме этого, результат вызова new ItcTabs() можно сохранить в переменную, а затем использовать её для программного переключения вкладок.
Краткое описание исходного кода JavaScript
Исходный JavaScript построен на основе класса ItcTabs .
- this._elTabs — это DOM-элемент, содержимое которого нужно инициализировать в качестве табов;
- this._elButtons — элементы, которые представляют собой вкладки;
- this._elPanes — элементы, содержащие контент, который необходимо переключать с помощью вкладок.
Установка обработчика для события click осуществляется в методе _events() . Данный метод вызывается в конструкторе.
Для отображения определённого контента в зависимости от нажатой вкладки выполняется с помощью метода show() . Элемент, на который нажали передаём в качестве аргумента:
Метод showByIndex(index) предназначен для перехода на вкладку по её индексу.
Примеры
1. Пример, в котором данные о последней открытой вкладки таба будем сохранять в LocalStorage, а затем использовать эту информацию при открытии страницы для переключения на неё:
2. Пример синхронизации вкладок на разных открытых страницах, относящихся к одному источнику (через LocalStorage):
3. Пример, в котором показано как на одной странице можно вывести несколько табов с сохранением их состояний (активных вкладок) в LocalSorage:
4. Табы, содержащие видео с YouTube. При переходе на другую вкладку будет приостанавливаться воспроизведение текущего видео.
В элементах .player атрибут data-video-id определяет videoId ролика, а data-width и data-height — ширину и высоту iframe .
Загрузку API IFrame Player будем выполнять асинхронно. Для этого напишем следующий код:
Создание <iframe> и проигрывателя YouTube будем выполнять после загрузки кода API посредством функции onYouTubeIframeAPIReady :
Вкладки (табы) с бесконечной вложенностью
Вкладки (табы) довольно востребованный инструмент в разработке сайтов. И это понятно, компактность, возможность представления большого объёма информации без переходов и прокрутки страниц, всё это делает вкладки такими популярными.
Ранее мы не раз рассматривали тему создания вкладок, как с помощью небольших плагинов jQuery, так и без использования javascript, исключительно на чистом CSS.
Так как тема интересует читателей, соответственно возникает и масса вопросов. Довольно часто спрашивают: «Как сделать вкладки с возможностью вложенности?» Что конечно же прилично расширяет функционал табов.
Сегодня хочу показать вам, как с помощью jQuery и волшебных свойств CSS3, можно очень легко реализовать вкладки (табы) с бесконечной вложенностью. А чтобы вкладки не выглядели стандартно, сделаем их более-менее похожими на вкладки браузера Chrome.
Прежде всего, что нам понадобится, чтобы вкладки заработали и выглядели так как задумано:
Работа вкладок основана на jQuery, так что актуальная версия этой библиотеки должна быть у вас подключена, в разделе <heaad>. </head> , или перед закрывающим тегом </body> .
Набор правил CSS, для формирования внешнего вида вкладок
Небольшой плагин, который и будет выполнять всю работу, в связке с библиотекой jQuery, запустит движуху вкладок (табов).
Если библиотека jQuery у вас ещё не используется, подключаете, для этого вы можете использовать сервис Google Code:
Последнюю версию jQuery можно узнать на официальном сайте jQuery
Едем дальше. Создадим html-каркас наших вкладок, для этого используем стандартный div-контейнер, а для навигации по вкладкам неупорядоченный список ul . Вот так в html будет выглядеть одиночный блок вкладок без вложений:
<div <ul <li 1</li> <li>Вкладка 2</li> <li>Вкладка 3</li> </ul> <div <div <p> Здесь размещаете любой контент, текст, картинки или видео, а может и всё сразу… </p> </div> <div> <p> Здесь размещаете любой контент, текст, картинки или видео, а может и всё сразу… </p> </div> <div> <p> Здесь размещаете любой контент, текст, картинки или видео, а может и всё сразу… </p> </div> </div> </div>
Обратите внимание, первому пункту навигации и соответственно первому блоку с контентом, прописан касс «active» . В CSS для этого класса определено свойство display: block; , что делает первую вкладку открытой при загрузке страницы. При необходимости, вы можете назначить активной при загрузке любую другую вкладку, или же вообще, сделать все вкладки закрытыми, исключив class=»active» .
Теперь давайте, в одну из вкладок встроим ещё один блок вкладок, это и будет та самая вложенность. Для этого достаточно взять приведённый выше код и вставить в один из div содержания, в примере я использовал третью вкладку.
Чтобы показать возможность многочисленных вложений вкладок, во второй, встроенный блок вставим ещё один бокс вкладок, в этот раз выберем вторую вкладку. В итоге у нас получится целая серия компактных панелей с большим объёмом содержания, вложенных одна в другую:
<div <ul <li 1</li> <li>Вкладка 2</li> <li>Вкладка 3</li> </ul> <div <div <p> Здесь размещаете любой контент, текст, картинки или видео, а может и всё сразу… </p> </div> <div> <p> Здесь размещаете любой контент, текст, картинки или видео, а может и всё сразу… </p> </div> <div> <div <ul <li 1</li> <li>Вкладка 2</li> <li>Вкладка 3</li> </ul> <div <div <p> Здесь размещаете любой контент, текст, картинки или видео, а может и всё сразу… </p> </div> <div> <div <ul <li 1</li> <li>Вкладка 2</li> <li>Вкладка 3</li> </ul> <div <div <p> Здесь размещаете любой контент, текст, картинки или видео, а может и всё сразу… </p> </div> <div> <p> Здесь размещаете любой контент, текст, картинки или видео, а может и всё сразу… </p> </div> <div> <p> Здесь размещаете любой контент, текст, картинки или видео, а может и всё сразу… </p> </div> </div> </div> </div> <div> <p> Здесь размещаете любой контент, текст, картинки или видео, а может и всё сразу… </p> </div> </div> </div> </div> </div> </div>
Как видите, с html-разметкой всё очень просто. По идее, добавлять вкладки можно до бесконечности, но это уже полное извращение. Пара-тройка вложений вполне оправдано и достаточно.
Стандартный вид вкладок уже как-то приелся, фичи из материального дизайна тоже не особо радуют, везде всё одно и тоже. Так что, пункты навигации по вкладкам, эаделал в браузерном стиле, с помощью псевдоэлементов :after и :before .
Если возникнут проблемы с свойством наложения z-index: , а они могут возникнуть, маловероятно, но чем чёрт не шутит, так как значения выставил чисто для примера, просто поэкспериментируйте с параметрами и всё у вас получится. В остальном, как видите, всё проще некуда.
jQuery
Актуальную версию библиотеки подключили напрямую с Google CDN или с сервера, где располагается ваш сайт, остаётся только завести наши вкладки, для чего перед закрывающим тегом
, прописываем инициирующий плагин my-tabs.js , предварительно загруженный в папку, где у вас «складируются» все js:
«Фарш» плагина — это всего лишь из нескольких строк кода, никаких настроек и каких бы то ни было эффектов. Простенькую анимацию при открытии вкладок, прописал в CSS.
На этом пожалуй всё. Симпатичные вкладки (сугубо на мой взгляд) с бесконечной вложенностью готовы к работе. Остаётся только посмотреть готовый результат и если оно вам надо, скачать исходники, которые я бережно упаковал и выложил на свой Яндек.Диск:
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Всего комментариев: 7
Классное решение и очень своевременно наткрулся. Жму руку в благодарность.
Спасибо за отзыв.
В статье не написал, но думаю и так понятно, что в дремучих версиях IE (ниже 9-й), вкладки будут выглядеть совсем иначе или не будут работать вообще.
Андрей. Была бы мужчиной, сказала бы — снимаю шляпу. Вроде как и просто-но это что-то. Всегда слежу за Вашими публикациями. Спасибо.
Виктория, спасибо за ваш отзыв и внимание.
Всё-таки добили Андрея вкладками во вкладках… *))))
Хотел бы посмотреть на реализацию «вкладки во вкладках» на сайтах. А то честно использование такого функционала вызывает UI шок )))
Если без фанатизма, то парочку вложений всё-таки использовать можно. Закидоны у всех разные, есть вопросы, значит должен быть и ответ. Да и самому поэкспериментировать было интересно.
Отличные вкладки. Спасибо!
Есть вопрос: нужно сделать так чтобы при добавлении страницы в закладки — она открывалась на той вкладке которая была открыта последней. Можно делать куками, но лучше как мне кажется сделать ссылки с хэшем вида.
<a href=»#tab1″>Вкладка 1</a>
<div >
<ul >
<li ><a href=»#tab1″>Вкладка 1</a></li>
<li><a href=»#tab2″>Вкладка 2</a></li>
<li><a href=»#tab3″>Вкладка 3</a></li>
</ul>
<div >
<div >
<p>
Здесь размещаете любой контент, текст, картинки или видео, а может и всё сразу.
</p>
</div>
<div>
<p>
Здесь размещаете любой контент, текст, картинки или видео, а может и всё сразу.
</p>
</div>
<div>
<p>
Здесь размещаете любой контент, текст, картинки или видео, а может и всё сразу.
</p>
</div>
Собственно какой js для этого нужен? Есть мысли?