Как внутри таба сделать еще 2 таба

Так как обычные табы нельзя вкладывать друг в друга, нужны другие табы, которые лишены этого недостатка. Сделать это можно с помощью переключателя data-dynamic=switcher Короче простой гайд для тех, кому нужны такие табы:

Это картинка, не тыкайте.

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

Внутри расположены кнопки вкладок: у них должен быть уникальный для каждого набора табов код data-switcher . Тут, например, указан код ctab , а у других табов на этой же странице необходимо указывать другой код. Например, ctab2 .

Хотя бы одна кнопка должна быть активна (класс active ), чтобы вкладки отображались. Вы можете убрать этот класс, если хотите более быстрой загрузки или сохранения места на странице.

Также внутри основного контейнера расположен контейнер для вкладок CUSTOM_PANELS_CONTAINER . Отдельный контейнер нужен для удобства подсчётов в CSS. Классы для контейнера и самих вкладок указаны для наглядности и понимания кода — обычно в коде чёрт ногу сломит, но с большими надписями не пропадёте. Если это не удобно для вас — можете удалить или заменить, на CSS это не повлияет.

Я не буду расписывать как сделать очень-очень красиво (я не умею), но расскажу как сделать, чтобы работало:

Свойство display: grid; позволяет легко создать нужные для вертикальных табов колонки. Если вам нужны горизонтальные табы, то удаляйте всё связанное с колонками, а для кнопок добавляйте свойство display: inline-block; .

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

Стили кнопок (селектор .custom-tabs > [data-dynamic] ):
Для дополнительных стилей при наведении/нажатии используйте соответствующие селекторы состояний :hover и :active .

Контейнер вкладок позволяет обнулить нумерацию элементов, чтобы псевдоклассы :nth-child(n) у кнопок и вкладок совпадали. По умолчанию вкладки скрыты и отображаются только при активной вкладке. Ограничение этого стиля — всего 9 вкладок, но добавить новые не составит труда.

Как сделать таб, в котором будет таб, в котором будет таб?

Как сделать эту немного комическую цепочку в заголовке?
Необходимо, чтобы был таб, в котором есть два-три таба, затем в каждом из них еще по табу, в которых есть контент, глубина вложенности, которых не ограничена.

Сделал садистскую разметку, но работает!) В скрипте надо было всего чуть докрутить.

То же самое без jQ:

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

CSS-club – настройка внешнего вида сайта

Это картинка, не тыкайте.

Я не буду расписывать как сделать очень-очень красиво (я не умею), но расскажу как сделать, чтобы работало:

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

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

Читать:

Как получить данные авторизированного пользователя laravel

Смотрите также

Создаем удобные, практичные вкладки с помощью jQuery 50 комментариев
Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery) 66 комментариев
Добавляем кнопку «Google +1» в панель от Share42.com 68 комментариев
Красивые всплывающие подсказки с помощью jQuery 144 комментария

Комментарии (977)

Вот дополнение только с эфaектом fadeOut -In

Ваш скрипт, даже обновленный, не выводит виджеты Google+ в FifeFox и в IE 11. Вы пробовали делать такие закладки для виджетов соц. сетей?

Здравствуйте! Скажите, а в примере номер 4 можно ли сделать, чтобы при нажатии на якорь, не просто таб активировался, но и чтобы страница прокручивалась вниз до этого таба? Помогите, пожалуйста!

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

Будут нормально индексировать, вкладки это все лишь спрятанные блоки через display:none

Отличный блог! Всем спасибо за помощь! Очень оперативно и по делу. Скорость ответов — быстрая, как в чате:)

Ещё один вопрос) Скажите, а можно ли сделать так, чтобы после нажатия на якорь, #tab не приклеивалось в адресной строке к url’у? или хотя бы, чтобы при нажатии f5, то есть при обновлении страницы эта приписка удалялась из адресной строки. Просто, когда мы нажимаем на якорь всё ок работает, но если обновить страницу, то снова срабатывает якорь.

Из адреса нельзя убрать. А чтобы не срабатывало при перезагрузке страницы, удалите эту часть кода:

Большое спасибо, Вы очень помогли!

Приветствую.
Есть ли решение «якорь + запоминание по кукам или localStorage»?
Нужно что бы переносило на определенный таб, но и что бы при перезагрузке страницы пользователь оставался на нужной странице.

Только по отдельности.

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

В HTML-коде переставьте классы .active на соответствующие блоки.

Приветствую! Использую ваш скрипт на сайте. Левая колонка получилось очень большой и при нажатии не видно контента вверху страницы. Можно ли как-то дополнить скрипт, чтобы при нажатии на таб страничка скоролилась в самый верх?

Добрый день!
Подскажите, что делать, если внутри div вкладок используются еще вложенные div со своими классами. Проблема в том, что они остаются скрытыми.

Не подскажите, появились следующие вопросы:

1. какой код проверки прописать, если у пользователя не работает Javascript, чтобы вывести содержимое без табов.

2. Хотел бы сослаться якорной ссылкой из контента вне таба на этой же странице на содержимое внутри таба, но если вкладка не активная, то якорная ссылка не работает. Как можно заставить заработать ссылку?

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

Не увидел сразу пример 4. 🙂
А возможно и, чтобы при нажатии ссылки с якорем, помимо переключения вкладки еще бы осуществлялся бы физический перенос к этой вкладке?
У меня вкладки находятся ниже текста, и не попадают в видимую часть страницы.

Создание табов на чистом JS

Привет! Давайте создадим табы на чистом JS для сайта. Для удобства, я сделал видео, оно выше.

Вступление

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

Немаленький код, но тут больше всего места занимает сам контент. По факту, нас интересуют кнопки tabs__btn с их дата-атрибутами, а также tabs__content с их атрибутами.

Посмотрите его в исходниках

Что же мы тут делаем?

Находим все кнопки и все контенты в переменные tabsBtn и tabsContent .
Делаем обработчик клика по табам, и проверяем, если кликаем именно на кнопки tabsBtn — выполняем некие действия.
Первое из них — забираем атрибут data-tabs-path у текущей нажатой кнопки.
Второе — снимаем класс активности со всех кнопок
Третье — находим текущую кнопку и даем ей класс активности.
Используем функцию tabsHandler , в которой снимаем у всех контентов класс и через ранее созданную переменную path находим нужный контент и даем ему класс активности.

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

Как внутри таба сделать еще 2 таба