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

Табы (вкладки) для сайта на 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 кода

Источник

Tabs (табы) | CSS

CSS Tabs с переходом по клику

CSS Tabs, с переходом по щелчку

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

Если :hover заменить на :active, то будет самый чистый HTML код табов, где смена содержимого осуществляется нажатием на вкладку.

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

Для копирования текста используйте комбинацию клавиш CTRL+C.

Меню вкладками, где поле изначально скрыто. Появляется или при наведении, или по клику. Если щелкнуть вне меню, то оно свернётся.

165 комментариев:

Протестировала, всё работает, даже в Опера.Мини. RusyLev Очень интересный обзор, на некоторых своих сайтах именно ваши табы и использую.

Но возник вопрос, как можно модифицировать 1-ый пример табов, чтобы сами табы были слева?

Пример: https://dl.dropboxusercontent.com/u/1104627/articles/CSS/vertical_tabs/index.html RusyLev или как здесь http://www.slotvoyager.com/list/videopokers/games/videopokerama NMitra Дополнила статью ещё одним примером Rusylev Браво! Огромное спасибо! Rusylev поставил на сайт, попытался вставить изображения в табы, но что-то ничего не выходит толкового. Невозможно настроить отступ снизу от картинок, они налазят друг на друга.

В хроме (в мозиле рамка чуть меньше, чем в хроме. Хорошо), всё отлично, к большому удивления в Яндекс браузере рамка на четверть текста, в ИЕ и в Опере тоже самое, а вот в Опере-мини отображает коректно.

Подскажите пожалуйста, как это решить?

ЯПлакать. Анонимный Забыл представиться, Михаил. NMitra height: 209px; заменить на height: 339px; Анонимный NMitra, вы прелесть и 41 раз умница! Большое Вам спасибо
Михаил Анонимный Здравствуйте. Подскажите пожалуйста, как в четвёртом примере добавить ещё span (колонки). У меня нарушается порядок их перехода или не работает вовсе.
Спасибо. NMitra Здравствуйте

.korpus
.korpus label
.korpus input[type=»radio»]:checked + label
.korpus > input:nth-of-type(1):checked

div:nth-of-type(3) Анонимный Спасибо за материал. NMitra Рада помочь. zloe-aloe спасибо, отличная штука!

не подскажете, почему не получается 4-й вариант сделать с 6-ю вкладками?

.korpus1 > span + span:hover + span + span + span + span

div:nth-of-type(2),
.korpus1 > span + span + span:hover + span + span + span

div:nth-of-type(3),
.korpus1 > span + span + span + span:hover + span + span

div:nth-of-type(4),
.korpus1 > span + span + span + span + span:hover + span

div:nth-of-type(5),
.korpus1 > span + span + span + span + span + span:hover

.korpus1 > span:hover + span + span + span + span + span

div:nth-of-type(2),
.korpus1 > span:hover + span + span + span + span + span

div:nth-of-type(3),
.korpus1 > span:hover + span + span + span + span + span

div:nth-of-type(4),
.korpus1 > span:hover + span + span + span + span + span

div:nth-of-type(5),
.korpus1 > span:hover + span + span + span + span + span

.korpus1 > span + span:hover + span + span + span + span

div:nth-of-type(3),
.korpus1 > span + span:hover + span + span + span + span

div:nth-of-type(4),
.korpus1 > span + span:hover + span + span + span + span

div:nth-of-type(5),
.korpus1 > span + span:hover + span + span + span + span

.korpus1 > span + span + span:hover + span + span + span

div:nth-of-type(2),
.korpus1 > span + span + span:hover + span + span + span

div:nth-of-type(4),
.korpus1 > span + span + span:hover + span + span + span

div:nth-of-type(5),
.korpus1 > span + span + span:hover + span + span + span

.korpus1 > span + span + span + span:hover + span + span

div:nth-of-type(2),
.korpus1 > span + span + span + span:hover + span + span

div:nth-of-type(3),
.korpus1 > span + span + span + span:hover + span + span

div:nth-of-type(5),
.korpus1 > span + span + span + span:hover + span + span

.korpus1 > span + span + span + span + span:hover + span

div:nth-of-type(2),
.korpus1 > span + span + span + span + span:hover + span

div:nth-of-type(3),
.korpus1 > span + span + span + span + span:hover + span

div:nth-of-type(4),
.korpus1 > span + span + span + span + span:hover + span

.korpus1 > span + span + span + span + span + span:hover

div:nth-of-type(2),
.korpus1 > span + span + span + span + span + span:hover

div:nth-of-type(3),
.korpus1 > span + span + span + span + span + span:hover

div:nth-of-type(4),
.korpus1 > span + span + span + span + span + span:hover

NMitra Рабочий вариант:

Заранее благодарю за внимание. Денис Демин жду ответа. Еще раз спасибо. 🙂 NMitra Здравствуйте, так и размещайте 🙂 Александра Помойницкая Добрый день! Подскажите, пожалуйста, как сделать, чтобы в примере номер 1 при загрузке, верхней была вторая вкладка, а не первая. В вашем примере сейчас CSS верхняя, а как сделать, чтобы HTML была верхней? Спасибо! NMitra Добрый день. checked=»checked» нужно убрать из

и поставить в
Александра Помойницкая Спасибо огромнейшее. maritca Добрый день, не работает в ИЕ и Сафари. вкладки просто не переключаются. NMitra Добрый день. Все последние версии браузеров поддерживают. Проблема может быть у старых версий, не поддерживающих селекторы. MarQs Li Потрясающе!
Поломал немного голову над четвертым вар. с семью вкладками, но оно того стоило, автор логику изложил отлично.
СПАСИБО! Анонимный не работает первый пример в IE 6 как можно сделать чтобы заработало? NMitra Увы, это невозможно. В IE6 подобные вещи делаются только с участием JavaScript Анонимный а не подскажите какой скрипт нужно вставить для корректной работы? Заранее благодарен Анонимный а не подскажите какой скрипт нужно вставить для корректной работы? Заранее благодарен NMitra Что-то типа такого http://shpargalkablog.ru/2011/01/forma-s-vkladkami.html Хотя в IE не проверяла Анонимный а куда прописывается этот скрипт для примера 1? 🙂 NMitra Лучше измените CSS этого http://shpargalkablog.ru/2011/01/forma-s-vkladkami.html Анонимный дело в том что сверстано уже не одна страница по примеру один и нужно как-то исправить этот БАГ 🙁 NMitra Подумаю NMitra Противный IE6, там вроде нужно будет всем прописывать id. Пробуйте:

Анонимный Прошу прощения за мою наглость и за чайничество 🙂 Вот к примеру страничка http://compol.ru/linoleum/travertine.php куда тут нужно дописать этот скрипт?) везде нормально показывает а на 6 версии как и описал выше не корректно NMitra Сначала попробуйте после

NMitra Я ещё раз проверила на IE, всё работает. У вас не работают примеры именно с моей страницы или когда вы добавляете их на свой сайт? Используете Windows? Александра Помойницкая Добрый вечер! Подскажите пожалуйста как сделать первый вариант с 9-ью вкладками.

так прописала и ничего не работает..просто все 9 дивов в столбик выстроились.

Подскажите пожалуйста как прописать. Спасибо. NMitra

div:nth-of-type(3) < display: block; padding: 5px; border: 1px solid #aaa; >NMitra См. комментарий 65 Денис Здравствуйте, NMitra. Подскажите пожалуйста как сделать 3-й вариант с 25 вкладками, а то я уже 3-й день мучаюсь, всё никак не получается ( NMitra

NMitra Чтобы в IE работало

.menu1 > a,
.menu1 #tab2:target

#tab2,
#tab3,
.menu1 > div,
.menu1 #tab2:target

.menu1 > div:nth-of-type(1),
.menu1 #tab2:target

.menu1 > a:nth-of-type(1),
.menu1 #tab2:target

Как тут добавить вкладки
NMitra См http://jsfiddle.net/NMitra/jxwkrabq/ Анонимный Спасибо. Помогите в 3-ем примере сделать вертикальные табы. NMitra Какой именно вариант, там где написано «Реализация попроще «? Влад «Реализация попроще». Да. Будьте добры. «Помогите в 3-ем примере сделать вертикальные табы.» NMitra HTML тот же, а CSS (см. http://jsfiddle.net/NMitra/5znb1ok0/ )

a:nth-of-type(3) < background: green; >Анонимный Здравствуйте. А как в третьем варианте зафиксировать выбранную вкладку, чтобы после перезагрузки страницы, она оставалась выбранной? NMitra Здравствуйте, тот, который при наведении курсора мышки? Анонимный То есть второй, там где по клику. Анонимный Или так получится только, если через инпуты делать? NMitra Попробуйте добавить скрипт

div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked

div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked

Вот картинки, иллюстрирующие это:
http://i71.fastpic.ru/big/2015/0520/9d/0c7e30bff1267a0613611e8d641b3a9d.jpg
http://i71.fastpic.ru/big/2015/0520/36/f40cf2603d8964fdcb74898d9e3ee836.jpg
http://i71.fastpic.ru/big/2015/0520/5c/d6b58e1ad8d84b8b564129e688b2d15c.jpg

Помогите, пожалуйста, уже голову сломал, не могу понять почему так происходит. NMitra label вкладок нужно присвоить класс и в коде только этому классу присваивать значения или (не для IE7-) перед label поставить символ > (см. http://shpargalkablog.ru/2011/10/css-selectors.html). Пример http://jsfiddle.net/NMitra/6fnkaafz/

.korpus0 > label <> Александр Все именно так и сделано:

Сорри, сюда код запостить не смог, html-теги не пропускает. Положил нужную часть сюда:
http://jsfiddle.net/Gealut/j4p58wr4/

Но вы можете использовать любой, убрав стили для первой вкладки, например, http://jsfiddle.net/f8c8rzbd/ Вопрос только в том, как он будет сворачиваться при ненадобности.

Или нужно смотреть в сторону JS. Муслим Гасанов Спасибо. А есть возможность использовать каскадом? Чтобы открыли по клику, потом еще и еще и еще и до скончания. )) Что-то типа таб внутри таба как-то не выходит(. NMitra Можно, но, увы, у меня не так много свободного времени. Посмотрите пример тут http://jsfiddle.net/NMitra/5uarcff5/ ( http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html ) или проще воспользуйтесь тегом details http://shpargalkablog.ru/2013/04/details-html.html Муслим Гасанов Спасибо Анонимный а вот во 2-м варианте (CSS Tabs, с переходом по щелчку) реально ли как то поставить ширину вкладки в пикселях?) под текст ширина вкладки легко самоподстраивается, а вот когда на странице 2 вкладки, смотрится не очень красиво(( Анонимный под шириной вкладки я имел ввиду, чтоб кнопку (к примеру tab1) по ширине зафиксировать в пикселях. NMitra Так?

Вопрос №1. Как сделать матрешку из вкладок с этим кодом (ссылка выше)? а то пытался и бестолку(
На сайте хочу сделать одну огромную страницу, в которой приблизительно по прикидкам в сумме будет 24 вкладки. Указано в примере ниже.
Вопрос №2. Как сделать ширину для кнопок (т.е. у каждого слоя матрешки вкладок будет разная ширина, как про цвета написал ниже.), чтоб они подстраивались не только под размер текста, но и под ширину страницы.
Ширина страницы 830px, но для кнопок она должна быть 800px (т.е. чтоб небольшие отступы все же были от краев страницы; желательно, но не обязательно).
Хотя как вариант сделать в % размер кнопок, который и будет зависить от ширины страницы.
Вопрос №3. Как сделать разные цвета в разных слоях матрешки вкладок? Указано в примере ниже.

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

Пример:
1) профессия 1 Подразделяется на: [цвет1]
1.1) вкладка 1.1
1.2) вкладка 1.2 [цвет3; у этих 4 вкладок]
1.3) вкладка 1.3
1.4) вкладка 1.4

2) профессия 2 Подразделяется на: [цвет1]
2.1) вкладка 2.1 Подразделяется на: [цвет2]
2.1.1) вкладка 2.1.1
2.1.2) вкладка 2.1.2 [цвет3; у этих 4 вкладок]
2.1.3) вкладка 2.1.3
2.1.4) вкладка 2.1.4
2.2) вкладка 2.2 Подразделяется на: [цвет2]
2.2.1) вкладка 2.2.1
2.2.2) вкладка 2.2.2 [цвет3; у этих 4 вкладок]
2.2.3) вкладка 2.2.3
2.2.4) вкладка 2.2.4

3) профессия 3 Подразделяется на: [цвет1]
3.1) вкладка 3.1
3.2) вкладка 3.2
3.3) вкладка 3.3
3.4) вкладка 3.4 [цвет3; у этих 7 вкладок]
3.5) вкладка 3.5
3.6) вкладка 3.6
3.7) вкладка 3.7

4) профессия 4 Подразделяется на: [цвет1]
4.1) вкладка 4.1
4.2) вкладка 4.2
4.3) вкладка 4.3 [цвет3; у этих 5 вкладок]
4.4) вкладка 4.4
4.5) вкладка 4.5

5) профессия 5 Подразделяется на: [цвет1]
5.1) вкладка 5.1
5.2) вкладка 5.2 [цвет3; у этих 2 вкладок]

Анонимный Ах да, забыл.

br короче
Иначе будет прокручивать окно к id akula-z Здравствуйте!
Скажите, пожапуйста, как убрать рамку вокруг табов? NMitra Здравствуйте, какой именно вариант? Какая именно рамка, общая? Рамку делает свойство border: http://shpargalkablog.ru/2013/12/border.html akula-z Да, общая рамка, вокруг текста.
То есть, мне надо просто удалить border: http://shpargalkablog.ru/2013/12/border.html NMitra Верно, в нужном месте убрать border или border-top и т.п. sat Добавил табы по наведению в joomshopping, в карточку товара. Все работает отлично, но вкладки при открытии не растягивают страницу вниз, как было, когда стояли в коде, а выводят содержимое сверху. Подскажите, плиз, что сделать, чтобы было правильно? NMitra Покажите URL с кодом, возможно стили конфликтуют sat На компе делаю.Вот, на скорую руку, закинул http://satinternet.ru/explore/features/2013-04-03-13-04-04/shoping/product/view/9/1 NMitra Обёртку сделайте внутри div с

overflow: auto;
height: 208px; /* ваша высота */ sat То есть, весь это код таба обернуть?
NMitra Нет, внутри div, например, не

sat Спасибо, получилось. Извиняюсь за дерзость)), а есть столь же простой вариант, чтобы без прокрутки? NMitra Предыдущий комментарий не к той статье написала 🙂

Увеличьте высоту height: 300px;

В CSS:
#raz < /* корпус */
position: relative;
height: 300px; /* корпус */
border-top: 30px solid #fff;
>

Лёха
слэш в конце это пережиток Doctype XHTML1.0
в html5 не нужен он

Источник

Адаптивные вкладки (табы) на CSS3

Не так давно, мы рассмотрели простейший способ реализации вкладок (табов) с содержанием, без подключения javascript, используя в работе исключительно стандарты CSS3.
Сегодня я хочу познакомить вас, с ещё одним, не менее интересным решением по формированию компактного блока вкладок (табов), построенных на чистом CSS3 и использованием элементов адаптивной вёрстки. Как и в первом варианте, ничего лишнего и громоздкого, самый минимум кода css, и в вашем распоряжении появится адаптивный блок с переключаемыми вкладками, который отлично впишется в любой раздел страницы, будь то отдельное сообщение, боковая колонка, или же модальное окно.

tabs3

Здесь размещаете любое содержание….

Здесь размещаете любое содержание….

Здесь размещаете любое содержание….

Здесь размещаете любое содержание….

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

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

Смотрите живой пример работы вкладок (табов), скачивайте исходники, экспериментируйте с параметрами, и творите, творите, творите…

Если вы устали работать с англоязычными шаблонами и мечтаете о шансе пользоваться русифицированными шаблонами, то вы определенно обрадуетесь одной отличной новости. На маркетплейсе TemplateMonster появились те самые готовые решения, которые вам нужны. Да-да, на сайте теперь можно ознакомиться с лучшими HTML шаблонами на русском языке. Локализованные шаблоны — это именно то, что нужно, если вы хотите построить свой онлайн-проект за минимальное количество времени. Кроме того, что тексты для шаблонов писались вручную, они обладают всеми необходимыми инструментами для создания профессионального сайта.

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 197

Хороший пример. В стилях не хватает только:
#content1, #content2, #content3, #content4 <
display: none;
>
Иначе не работает…

Отличный пост, Спасибо! Только вот я не пойму одно как если section:none; как он отображается? Немного концепцию недопонял.

Прошу прощения section

Активация секций с помощью переключателя :checked

#content4 <
display: block;
>
#tab1:checked

#content4 <
display: block;
>

Почему все заменились? Посмотрите к примеру у меня на сайте. В форме входа (Вверху есть «Войти в профиль». Все ужасно. При добавлении комментария после регистрации капчу тоже ввести невозможно. Как это решить?

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

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

Конкретный вопрос: Как сделать стили конкретно к вкладкам, чтобы стили не распространялись на всю страницу?

огромное спасибо, все круто!
а есть возможность табы друг в друга вкладывать?

Я имел ввиду страницу с любым материалоМ, просто получилась опечатка)
К примеру,
Вот еще и скриншот.

/* Стили вкладок (табов) */
.tabs label <
здесь свойства….
>
/* Стили вкладок (табов) */
.tabs label <
здесь свойства….
>

Большое спасибо, все встало на свои места! 🙂

Спасибо за Ваш сайт.

Ребята, подскажите, пожалуйста, как расположить вкладки по центру?
А то у меня их всего две и немного не симметрично смотрится.
Спасибо

Добрый день.
Столкнулся с такой проблемой, в каждой вкладке отображается свой график с данными. При загрузке страницы, отображается только график на загружаемой вкладке, при переключении на другие вкладки там все графики пропадают.
Графики отображаются при помощи библиотеки chartjs.org в виде canvas.
Как можно сделать, чтобы отображались все графики?
Заранее спасибо за помощь.

Добрый вечер!
Столкнулся с такой проблемой:
переключается все отлично, но в моем случае ссылки для табов находятся в виде координат на изображении. Как совместить эти две части.
Часть изображения с координатами:
tabs
alt=»Woodworking Essentials 1″ href=»/»>

И часть уже упрощенного кода с Вашей статьи:

Здравствуйте.
В таком виде, как в статье, вкладки на скрытых чекбоксах, привязать к ссылкам координат на изображении, скорее всего не получится, во всяком случае я не нашёл рабочего решения на чистом CSS. Если же использовать скрытые блоки и активировать их с помощью :target привязав к ссылкам через идентификаторы, то идея вполне реализуемая. Набросал на скорую руку небольшой пример: Тынц Но это больше для понимания самого механизма, нежели для прямого использования

возникла проблема с тегами input
пропали текстовые поля для ввода и поиска ()
виной всему часть:
.tabs input <
display:none;
>
но как исправить не знаю
подскажите

Здравствуйте.
Захотел переделать чтоб табы были с левой стороны сделав их списком но тогда перестает работать
#tab1:checked

#content4 <
display: block;
>
подскажыте пожалуйста как сделать

Все работает спасибо за помощь.

Спасибо за хорошую статью!

Минус этого способа — это невозможность поместить в другие формы.

… в select другие формы … *

Артём, и как же это вас угораздило сделать именно такой вывод?
Если не получается у вас, это не значит что минус в методе решения, может стоит покопаться для начала в себе…
Специально для вас: Жмяк

Авто, даже не знаю, как тебе спасибо сказать за эту прелесть 🙂
Посему — просто бОООльшое СПАСИБО! 😉

Здравствуйте. Помогите пожалуйста с задачей. Хочу разместить вкладки снизу контента, но правка css, и игра с позициями результата не дает( Не часто работаю с css, поэтому чуть подзабыл. Как правильно сделать, приведите пожалуйста пример.

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

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

Почему не возможно? Возможно. Внутри одного таба указываете label другого таба. Всего лишь. Пример ниже:
codepen.io/NeedHate/pen/eNJEdg

Это то понятно=) Или я не врубился в вопрос, или товарищ спрашивал именно о ссылке, а не о дублирующем переключателе внутри таба. Хотя какая разница, label это или главное работает)) Спасибо, NeedHate.

Табы не отображают такие html-элементы как input. В разметке присутствует, но таб не отображает его в видимом содержимом. Как побороть это?

Уже решил заменой строки в стилях
input <
display:none;
>
на
#tab1, #tab2 <
display:none;
>

Вот-вот, тоже бывает сначала задам вопрос и тут же сам на него нахожу ответ))).

А как сделать матрешку из табов (таб в табе или вкладка во вкладке), на странице хочу 24 вкладки сделать, у каждого слоя матрешки свой цвет кнопок, и ширина кнопок в % от ширины страницы.
А то в инете ток расписаны табы как у вас, 4-5 вкладок и усе((

Отличное решение, спасибо, очень помогли)

Доброе время суток! Очень благодарен за эту доступную статью. Но, хочу обратить внимание на то, что этот метод не работает не только на старых IE но и на новых планшетах. Вообще на всех планшетах. И мне стало интересно — а есть ли возможность адаптировать этот метод под планшеты.
Заранее спасибо.

Спасибо огромное. Приятно, что присутствуют комментарии в css, видно, что сделано с любовью))

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

А если всё то же самое, но перейти на таб нужно с другой страницы?

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

Спасибо за статью, но подскажите, пожалуйста, в чём может быть проблема. После вставки этого кода на одну из страниц
section <
display: none;
padding: 15px;
background: #fff;
border: 1px solid #ddd;
>
пропадает весь контент с ГЛАВНОЙ страницы! Остаются меню, футер и пустота.) Причём на той странице, где надо, вкладки работают без проблем.)

Да, и на главной то, что пропадает, тоже прописано через section…

Да, и ещё вопрос.) Можно ли сделать так, чтобы вкладка находилась ПОД секцией с содержанием (планируется, чтобы они у меня чуток подскакивали вверх при наведении/активации)? z-index’ом пробую, что-то не получается… Хотя, может я не туда прописываю.(

Спасибо за интересную статью!
Вопросик один возник. Есть необходимость с другой страницы обратиться к нужному табу(открыть нужный таб). Как это реализовать?

Как убрать отступы между заголовками табов?

Как добавить ещё один tab, добавляю

Обратная связь
и
#tab1:checked

#content5
<
display: block;
>
Tab добавляется,но на него нельзя переключиться

Я же не знал, что Вы не телепат! ))
Если Вам не трудно, посмотрите пожалуйста http://jsfiddle.net/myproplata/Lfgvhxxb/

Большое СПАСИБО за быструю помощь, и потраченное Вами время на мои примитивные вопросы. Все получилось!

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

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

Добрый день! Решение супер, но у меня вот что выходит yadi.sk/i/kFU7M4g4qkN6c

Добрый день.
Как сделать, чтобы работали Яндекс Карты в неактивной вкладке? Если карта помещена в неактивной вкладке, после выбора нужного таба рисунок карты не показывается. Как быть? Спасибо.

Доброго времени суток!
Статичные изображения Яндекс.Карт(Static API) прекрасно отображаются: см.пример
Тоже самое и с интерактивными картами(JavaScript API), всё прекрасно работает: см.пример

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

Сделал все как Вы и сказали, вкладки отображаются контент во второй вкладке отображается корректно (это комментарии вконтакте), а в первой вкладке комментарии wordpress исчезли. Вкладка № 1 получается пустой! Подскажите где здесь может быть подвох?

Спасибо большое, очень помогли!
Все работает превосходно, надеюсь больше ни каких ошибок не увижу!

Добрый день.
Вкладки работают отлично — спасибо.
Вопрос: как сделать так, чтобы в неактивной вкладке после ее выбора показывалась Яндекс Карта? Сейчас она не появляется, виден лишь серый квадрат без самой карты.
Спасибо.

Доброго времени суток!
Недавно уже отвечал на такой же вопрос и даже забабахал пару примеров см.пример 1 и см.пример 2. В онлайн редакторе всё работает как надо, или же я не въезжаю в суть вопроса

Добрый день! Возможно ли применить эффект fade или slide при переключении вкладок? Или это только с jquery?

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

Спасибо еще раз!! Может поможете еще немного? Не получается прикрутить стили к табам от одного сайта, точнее не до конца получается. Написать сюда или лучше через ватсап/вибер?

Здорово! Отличное решение. Приятный и нейтральный стиль, который подойдет к любому проекту. Спасибо за потраченное Вами время, чтобы предоставить такую хорошую работу!

Спасибо, то что искал, везде вертикально не тянутся только у вас адаптив нашел!

Добрый день!
А как например сделать что бы при заходи на страницу был активен второй таб?

Пропишите атрибут checked в теге нужной вам вкладки. Например, для второй вкладки будет так:

По-умолчанию, в примере, при загрузке открыта первая вкладка

Спасибо )
Все очень круто)

В папке на яндексдиске только демка, и нет исходников.

Хорошие табы. Лучшие из тех что я находила в Интернете

Добрый день, сделала 2 блока в каждом из которых по 3 таба, хотелось бы чтобы они работали отдельно друг от друга. А они переключают друг друга

Здравствуйте, такая же проблема как у Елены. Сделал 2 группы табов на странице, а они переключают друг друга. Как можно решить проблему?

Нашел решение. Елена, необходимо обернуть input и section в тег form

Здравствуйте! Подскажите как можно сделать якорь? Что бы при нажатию кнопки, открывался 4 таб и был переход к нему! Спасибо!

Здравствуйте!
В комментах уже отвечал примерно на такой же вопрос, посмотрите: тынц ⭢

Спасибо! Не внимательно читал!

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

Очень понравилось! Спасибо большое!
Подскажите, как сделать чтобы текст плавно появлялся (как в демке).

Здравствуйте Сергей.
Добавьте анимацию к параграфам внутри табов:
.tabs > section > p <
margin: 0 0 5px;
line-height: 1.5;
color: #383838;
/* прикрутим анимацию */
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
>
/* Описываем анимацию свойства opacity */
@-webkit-keyframes fadeIn <
from <
opacity: 0;
>
to <
opacity: 1;
>
>
@keyframes fadeIn <
from <
opacity: 0;
>
to <
opacity: 1;
>
>
Или же просто перекачайте архив с исходниками, я его обновил, т.к. хз по какой причине, анимацию опустил в варианте для скачивания. В статью так же внёс изменения, в примере кода css

Доброго здравия,
как убрать квадратик от отсутствующей иконки слева от названий закладок?

И вам не хворать.
Просто, если вам совсем не нужны шрифт-иконки в заголовках вкладок закомментируйте или напрочь исключите следующее:
.tabs > label:before <
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
>
.tabs > label[for*=’1′]:before <
content: ‘\f19a’;
>
.tabs > label[for*=’2′]:before <
content: ‘\f17a’;
>
.tabs > label[for*=’3′]:before <
content: ‘\f13b’;
>
.tabs > label[for*=’4′]:before <
content: ‘\f13c’;
>
Чтобы закомментировать, заключите этот фрагмент кода в: /* здесь код */
НО, при просмотре на мобильном, без иконок получится, что заголовки пустые, так как вкладки настроены так, что при размещении их в контейнере малого размера или при просмотре на экранах мобильных устройств, в заголовках остаются как раз таки иконки, а текст убирается. Придётся изменить параметры в медиа-запросах:
@media screen and (max-width: 680px) <
label <
font-size: 14px;
>
>
@media screen and (max-width: 400px) <
label <
padding: 10px!important;
>
>
Посмотреть пример того что получилось и поковырять код можете здесь

А как сделать свои иконки в закладках?

Отвечал уже в комментариях на такой же вопрос: тынц

Подскажите в чем может быть проблема вот пациент:
Вообще ничего не работает. Заранее большое спасибо.

Юзайте полную новость верх.

#content4 <
display: block;
>

/* Убираем текст с переключателей
* и оставляем иконки на малых экранах
*/
@media screen and (max-width: 680px) <
.tabs-fullstory > label <
font-size: 0;
>
.tabs-fullstory > label:before <
margin: 0;
font-size: 18px;
>
>
/* Изменяем внутренние отступы
* переключателей для малых экранов
*/
@media screen and (max-width: 400px) <
.tabs-fullstory > label <
padding: 15px;
>
>
В общем всё тоже самое, только уложенное в другое место))))
По какой причине не предопределяются стили при прописке в style.css, для меня вопрос…Так что из этого файла ненужное(стили табов) подчистите

Большое спасибо за подсказку. С наступающим вас Новым годом!

Спасибо за ваш код — единственный, заработавший параллельно с моим CSS.
P.S. Использовала скачанный пример.

Но есть вопрос: я использовала ваш вариант для списка из многих пунктов (на данный момент 11, но будет увеличиваться до 33 — алфавит), так вот на мобильниках буквы-заголовки вкладок не видны. Т.е. у меня вместо WP «А», вторая закладка «Б» и т.д. Уменьшение отступов для букв-заголовков ничего не меняет, как решить вопрос?

Здравствуйте, Evgeniya.
На мобильниках буквы-заголовки вкладок не видны потому как по-умолчанию используется медиа-запрос
@media screen and (max-width: 680px) <
.tabs>label <
font-size: 0;
>
.tabs>label:before <
margin: 0;
font-size: 18px;
>
>
это значит, что при просмотре на экранах меньше 680px выводятся только иконки Font Awesome, а текст исключаем с помощью font-size: 0;
Если вам не нужны иконки, а в переключателях вкладок планируете использовать только текст (в вашем случае буквы алфавита), просто выпилите из css шрифт-иконки от Font Awesome, а с помощью медиа-запросов можете настроить изменения вкладок (внешие и внутренние отступы, размер шрифта, рамка) при просмотре на малых экранах
Не знаю, угадал ли я то что вам нуна, но набросал небольшой пример: тынц
В примере сделал рабочими вкладки до буквы «Й» включительно, просмотрите весь фарш и если это оно самое, дальше, думаю, принцип дальнейших действий вам будет понятен )).

Вероятно, да! Я сразу «выпилила» про иконки, т.к. они мне изначально были не нужны, а по поводу невидимости букв догадалась уже после того, как написала комментарий 🙂 Я довела до 11, у меня пока их столько, но принцип я поняла. А вот с кодом css, где буквы вместо иконок (сама не поняла как решить вопрос) — я так понимаю, что это первая часть до /* Базовый контейнер табов */? Весьма благодарна!

Ан-нет. На мобильнике не видно, скрин делала из браузера, но там понятно, как выглядит.

Источник