Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

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

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

 
Какие изменения были внесены относительно первого варианта?
Прежде всего, блок вкладок стал адаптивным, т.е. при просмотре на мобильных устройствах, размер вкладок изменяется в зависимости от размеров экранов пользовательских устройств, текст заголовков убирается и остаются только шрифт-иконки, указывающие на смысл содержания той или иной .
Шрифт-иконки прикрутил от Font Awesome, коллекция очень богатая и к тому же абсолютно бесплатна. Вы можете интегрировать иконки в любой проект используя скачанный набор со шрифтами, или же подключить к вашему файлу стилей css напрямую, с сайта разработчика через @import, используя такую строчку:

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

В демонстрационном примере именно так я и сделал, так что взглянув на исходники, легко разберётесь что к чему.
Структура вкладок в Html довольно проста. Базовый div-контейнер, связка <input> <label> и непосредственно секции <section>, в которых скрыт до поры до времени определенный контент. Всё! Ничего лишнего, никаких библиотек js, ни дополнительных файлов изображений в оформлении, внешний вид вкладок, а так же их функциональность, формируется исключительно средствами CSS. Конечно, использование новых стандартов CSS3, не гарантирует стабильной работы во всех браузерах без исключения, но в современных версиях, вкладки работают отлично. IE-шка корректно отображает вкладки начиная с 9-й версии. Так что если вам не безразлична психика и чувства восприятия пользователей упорно сидящих на более старых версиях этого «брууузера», данный способ создания вкладок лучше не применять, а воспользоваться стабильным решением с применением jQuery.

HTML

<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1" title="Вкладка 1">Вкладка 1</label>
 
    <input id="tab2" type="radio" name="tabs">
    <label for="tab2" title="Вкладка 2">Вкладка 2</label>
 
    <input id="tab3" type="radio" name="tabs">
    <label for="tab3" title="Вкладка 3">Вкладка 3</label>
 
    <input id="tab4" type="radio" name="tabs">
    <label for="tab4" title="Вкладка 4">Вкладка 4</label>
 
    <section id="content-tab1">
        <p>
                Здесь размещаете любое содержание....
        </p>
    </section>  
    <section id="content-tab2">
        <p>
          Здесь размещаете любое содержание....
        </p>
    </section> 
    <section id="content-tab3">
        <p>
          Здесь размещаете любое содержание....
                </p>
    </section> 
    <section id="content-tab4">
        <p>
          Здесь размещаете любое содержание....
        </p>
    </section>    
</div>

Для организации блоков с содержанием я использовал тег <section> из обоймы HTML5, который применяется, в большинстве случаев, для разделения документа на разделы, различные и по смыслу и по содержанию, с возможностью использования собственных заголовков первого уровня <h1>.
Переключение вкладок происходит посредством взаимодействия атрибута checked в теге <input> и псевдокласса :checked, прочно связанными через идентификаторы в CSS. В обработке такого метода и спотыкается старенький, знаменитый тормоз прогресса Internet Explorer 8, с 9-й версии всё работает в лучшем виде.

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

CSS3

/* Базовый контейнер табов */
.tabs {
        min-width: 320px;
        max-width: 800px;
        padding: 0px;
        margin: 0 auto;
}
/* Стили секций с содержанием */
.tabs>section {
        display: none;
        padding: 15px;
        background: #fff;
 border: 1px solid #ddd;
}
.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;
        }
}
/* Прячем чекбоксы */
.tabs>input {
        display: none;
        position: absolute;
}
/* Стили переключателей вкладок (табов) */
.tabs>label {
        display: inline-block;
        margin: 0 0 -1px;
        padding: 15px 25px;
        font-weight: 600;
        text-align: center;
        color: #aaa;
 border: 0px solid #ddd;
 border-width: 1px 1px 1px 1px;
        background: #f1f1f1;
 border-radius: 3px 3px 0 0;
}
/* Шрифт-иконки от Font Awesome в формате Unicode */
.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";
}
/* Изменения стиля переключателей вкладок при наведении */
 
.tabs>label:hover {
        color: #888;
 cursor: pointer;
}
/* Стили для активной вкладки */
.tabs>input:checked+label {
        color: #555;
 border-top: 1px solid #009933;
 border-bottom: 1px solid #fff;
 background: #fff;
}
/* Активация секций с помощью псевдокласса :checked */
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 {
 display: block;
}
/* Убираем текст с переключателей 
* и оставляем иконки на малых экранах
*/
 
@media screen and (max-width: 680px) {
        .tabs>label {
                font-size: 0;
        }
        .tabs>label:before {
                margin: 0;
                font-size: 18px;
        }
}
/* Изменяем внутренние отступы 
*  переключателей для малых экранов
*/
@media screen and (max-width: 400px) {
        .tabs>label {
                padding: 15px;
        }
}

Оформить вкладки () вы можете как угодно, всё что в примере, это только пример, моё сиюминутное видение продукта, ничего больше. Значения Unicode нужных вам шрифт-иконок, сможете узнать на сайте разработчика, для этого просто нажмите на выбранную иконку и скопируйте выданный цифровой код, примерно такого вида: \f13b.
Обратите внимание, когда вы уменьшаете размер окна браузера, вкладки автоматом подстраиваются под текущий размер до определённого значения (в примере 680px), после этого значения, текстовые заголовки вкладок исчезают, остаются иконки. Тем самым достигается максимальная компактность всего блока вкладок, остаётся лишь правильно подобрать эти самые иконки, подходящие по смыслу представленному контенту внутри вкладок.

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

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

С Уважением, Андрей .

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

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

  • Юрий: 15 августа, 2014 в 12:36

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

    Ответить
    • driver: 15 августа, 2014 в 21:11

      Спасибо Юрий, ещё несколько раз проверил, всё работает, по крайней мере в последних версия браузеров точно. display:none; прописан для <section>. Смысла дублировать не вижу, IE8 и ниже, по любому данный метод не поддерживают.

      Ответить
  • Badr: 19 октября, 2014 в 14:17

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

    Ответить
  • Badr: 19 октября, 2014 в 14:18

    Прошу прощения section {display:none}

    Ответить
    • driver: 19 октября, 2014 в 15:18

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

      #tab1:checked ~ #content1,
      #tab2:checked ~ #content2,
      #tab3:checked ~ #content3,
      #tab4:checked ~ #content4 {
      display: block;
      }
      #tab1:checked ~ #content1,
      #tab2:checked ~ #content2,
      #tab3:checked ~ #content3,
      #tab4:checked ~ #content4 {
      display: block;
      }

      По умолчанию при загрузке открыта первая вкладка, в теге <input> для этой вкладки прописан атрибут checked. Таким образом, можете легко задать любую вкладку, сделать её раскрытой при загрузке, а можете и вовсе все закрыть.

      Ответить
  • Артем: 9 ноября, 2014 в 16:00

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

    Ответить
    • driver: 9 ноября, 2014 в 16:14

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

      Ответить
      • Артем: 9 ноября, 2014 в 16:37

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

        Ответить
      • Артем: 9 ноября, 2014 в 17:01

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

        Ответить
  • pasha: 9 ноября, 2014 в 17:39

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

    Ответить
  • Артем: 9 ноября, 2014 в 17:53

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

    Ответить
    • driver: 9 ноября, 2014 в 18:40

      У вас конфликт между стилями для тега <label> вкладок и форм используемых на сайте. Исправить ситуёвину можно добавив в css каждому label вкладок класс .tabs, примерно вот так:

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

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

      Ответить
      • Артем: 10 ноября, 2014 в 14:57

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

        Ответить
  • Юлиана: 8 декабря, 2014 в 11:56

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

    Ответить
  • Дмитрий: 19 февраля, 2015 в 16:14

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

    Ответить
    • driver: 19 февраля, 2015 в 22:42

      Для label пропишите position: relative; и left: 25%;, этого будет достаточно.

      Ответить
  • Антон: 1 марта, 2015 в 10:59

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

    Ответить
  • Андрей: 14 марта, 2015 в 20:24

    Добрый вечер!
    Столкнулся с такой проблемой:
    переключается все отлично, но в моем случае ссылки для табов находятся в виде координат на изображении. Как совместить эти две части???
    Часть изображения с координатами:
    <img src="/images/tabs.png" width="841" usemap="#Navigation" alt="tabs"> <map id="Navigation" name="Navigation">
    <area shape="poly" coords="0,244,124,216,124,30,0,2"
    alt="Woodworking Essentials 1" href="/">
    </map>

    И часть уже упрощенного кода с Вашей статьи:
    <div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1" title="Wordpress">111111</label>
    </div> <section id="content1">
    11111111111111111111111111
    </section>

    Спасибо!!!

    Ответить
    • driver: 15 марта, 2015 в 02:42

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

      Ответить
  • aliks: 17 марта, 2015 в 13:00

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

    Ответить
    • driver: 17 марта, 2015 в 13:37

      Используйте .tabs input[type="radio"]
      Тем самым, вы явно укажите свойство display:none; только для радио-кнопок внутри контейнера с классом tabs
      Или же так: div.tabs > input[type="radio"] {display:none;}
      В примере приведен селектор, согласно которому в контейнере div некоего класса «tabs» все радио-кнопки input будут временно исключены из документа, при этом другие элементы с тегом input, находящиеся на странице, будут работать и отображаться, как и прежде

      Ответить
  • Ярик: 21 марта, 2015 в 01:25

    Здравствуйте.
    Захотел переделать чтоб табы были с левой стороны сделав их списком но тогда перестает работать
    #tab1:checked ~ #content1,
    #tab2:checked ~ #content2,
    #tab3:checked ~ #content3,
    #tab4:checked ~ #content4 {
    display: block;
    }

    подскажыте пожалуйста как сделать

    Ответить
    • driver: 21 марта, 2015 в 05:36

      Здравствуйте.
      Для начала базовому div-контейнеру вкладок .tabs установите position: relative;. Затем вносите изменения в label и section, без учёта правок под ваши будущие фантазии, получаем примерно следующее:
      активная вкладка
      input:checked + label {
      color: #555;
      border: 1px solid #ddd;
      border-left: 1px solid #009933;
      background: #fff;
      border-right: 0;
      }

      вкладки
      label {
      display: inline-block;
      margin: 0 1px 1px;
      padding: 15px 25px;
      font-weight: 600;
      text-align: center;
      color: #aaa;
      border: 1px solid #ddd;
      background: #f1f1f1;
      width: 22%;
      float: left;
      clear: left;
      margin-right: 0;
      }

      секции с содержанием
      section {
      display: none;
      padding: 15px;
      background: #fff;
      border: 1px solid #ddd;
      margin-left: 22%;
      }

      Набросал на скорую руку, так что подправите, уже на месте, сам принцип думаю понятен.

      Ответить
  • Ярик: 21 марта, 2015 в 11:13

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

    Ответить
  • web11: 29 марта, 2015 в 21:13

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

    Ответить
  • Артём: 31 марта, 2015 в 18:46

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

    Ответить
    • Артём: 31 марта, 2015 в 18:47

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

      Ответить
      • driver: 31 марта, 2015 в 23:18

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

        Ответить
  • Дмитрий: 4 апреля, 2015 в 14:18

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

    Ответить
  • Андрей: 26 апреля, 2015 в 18:51

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

    Ответить
  • Владимир: 7 мая, 2015 в 17:37

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

    Ответить
    • driver: 8 мая, 2015 в 22:15

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

      Ответить
    • NeedHate: 10 мая, 2015 в 01:55

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

      Ответить
      • driver: 10 мая, 2015 в 02:16

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

        Ответить
  • Алексей: 11 августа, 2015 в 15:07

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

    Ответить
  • Алексей: 11 августа, 2015 в 15:14

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

    Ответить
    • driver: 11 августа, 2015 в 15:30

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

      Ответить
  • Алексей: 8 сентября, 2015 в 20:27

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

    Ответить
  • Роман: 13 октября, 2015 в 12:20

    Подскажите пожалуйста как сделать вкладки снизу ?

    Ответить
  • Илья: 13 октября, 2015 в 15:41

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

    Ответить
  • Дмитрий: 14 октября, 2015 в 09:27

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

    Ответить
  • Дмитрий: 25 октября, 2015 в 02:54

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

    Ответить
  • Елена: 5 ноября, 2015 в 03:47

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

    Ответить
    • driver: 7 ноября, 2015 в 11:47

      Здравствуйте.
      Самое простое, это использовать событие onclick где id соответствует идентификатору таба, который вы хотите видеть активным(раскрытым). Привязать событие можете к любому элементу( кнопке, тексту, картинке и т,д,)
      Например, чтобы открыть содержимое третьего таба с помощью выделенного текста, достаточно обнести его стандартной ссылкой с событием onclick:
      <a href="#content3" onclick="document.getElementById('tab3').checked='true';">Всё о HTML5</a>
      Ситуации бывают разные, так что, для того чтобы таб не просто активировался, но и чтобы страница прокручивалась до этого таба(удобно когда между ссылкой и табами много контента), мы прописываем идентификатор соответствующего блока с содержанием вкладки в атрибуте href="#content3", тем самым создаём якорь непосредственно к содержанию.

      Ответить
      • Андрей: 15 декабря, 2015 в 06:07

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

        Ответить
  • Павел: 11 ноября, 2015 в 04:00

    Спасибо, все работает бомба. Но была проблемка, из-за
    input {
    display: none;
    }

    Исчезло поле поиска с сайта. Исправил по аналогии с вышеописанной проблемой по <label> Получилось так:
    .tabs input {
    display: none;
    }

    Это на всяк случай, может у кого то будет подобная проблема. Результат использования вкладок:

    Ответить
    • driver: 11 ноября, 2015 в 05:48

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

      Ответить
  • Владислав: 3 декабря, 2015 в 18:51

    Здравствуйте, столкнулся с такой проблемой — поставил табы на свой сайт, все в порядке, но есть одно но: табы не переключаются в мобильной версии сайта на браузере google chrome. При чем такая проблема только на айфоне) все остальные браузеры справляются , но с хромом какие-то проблемы. Даже и не знаю, что с этим делать. Может кто знает, в чем проблема?)

    Ответить
  • Андрей: 9 декабря, 2015 в 00:30

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

    Ответить
    • Андрей: 9 декабря, 2015 в 00:49

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

      Ответить
      • driver: 9 декабря, 2015 в 08:19

        Вы сами ответили на свой вопрос))
        Сделайте так:
        .tabs section {
        display: none;
        padding: 15px;
        background: #fff;
        border: 1px solid #ddd;
        }

        Т.е. стиль для вложенного селектора section в div с классом .tabs.

        Ответить
  • Андрей: 13 декабря, 2015 в 17:02

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

    Ответить
  • TT: 18 декабря, 2015 в 16:11

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

    Ответить
  • TT: 18 декабря, 2015 в 18:03

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

    Ответить
  • Дмитрий: 14 февраля, 2016 в 21:25

    Как добавить ещё один tab, добавляю
    <input id="tab5" type="radio" name="tabs" >
    <label for="5" title="Обратная связь">Обратная связь</label>

    и
    #tab1:checked ~ #content1,
    #tab2:checked ~ #content2,
    #tab3:checked ~ #content3,
    #tab4:checked ~ #content4,
    #tab5:checked ~ #content5
    {
    display: block;
    }

    Tab добавляется,но на него нельзя переключиться

    Ответить
    • driver: 15 февраля, 2016 в 00:05

      Ну как же, вот: Тынц
      А ошибка у вас в label for="5", а нужно label for="tab5". Всё очень просто, немного внимательней и всё)))

      Ответить
  • Сергей: 6 марта, 2016 в 14:48

    Огромное СПАСИБО !
    Скажите пожалуйста, как разместить несколько таких блоков с табами на одной странице, чтоб вставить вниз? (имею ввиду скопирыват потом вставить на туже страницу)
    Заранее благодарен !!

    Ответить
  • Сергей: 13 марта, 2016 в 13:31

    Скажите пожалуйста ! Можно ли поменять иконку в табе на свою png или jpg ? Если можно, то как ?
    Заранее благодарен.

    Ответить
    • driver: 13 марта, 2016 в 14:28

      В табах используются шрифт-иконки от Font Awesome, набор иконок довольно богатый, можно подобрать любую в соответствии вашим требованиям. Также вы можете использовать и свои иконки форматов png или jpg, для этого придётся внести некоторые изменения в css, в частности в селекторах label и label[for*='1']:before, label[for*='2']:before, и т.д. по количеству вкладок.
      Для начала относительно позиционируем label добавив свойство position: relative; и настроим внутренние отступы padding: 15px 15px 15px 35px;. В итоге получаем следующее:
      label {
      display: inline-block;
      margin: 0 0 -1px;
      padding: 15px 15px 15px 35px;
      font-weight: 600;
      text-align: center;
      color: #aaa;
      position: relative;
      border: 1px solid #ddd;
      background: #f1f1f1;
      border-radius: 3px 3px 0 0;
      }

      А вот так будет выглядеть код для первой вкладки с fav-иконкой моего блога:
      label[for*='1']:before {
      width: 16px;
      content: " ";
      background-image: url(favicon.ico);
      position: absolute;
      left: 12px;
      top: 14px;
      height: 16px;
      }

      В background-image: правильно пропишите путь до нужной картинки!
      Соответственно шрифт-иконки от Awesome просто исключите из работы, банально удалив или закомментировав:
      /*label:before {
      font-family: fontawesome;
      font-weight: normal;
      margin-right: 10px;
      }*/

      Для наглядности набросал пример в онлайн-редакторе: Тынц

      Ответить
      • Сергей: 13 марта, 2016 в 20:17

        Огромное Вам СПАСИБО !!!
        ВСЕ ПОЛУЧИЛОСЬ ! Даже не знаю, чтоб я без Вас делал.
        Пришлось немного помучится, так как мои знания в html? css… близки к нулю.
        Но не получается выровнять текст вкладки с названием. (хочу чтоб текст был справа, а моя иконка слева)
        Подскажите пожалуйста как это можно сделать.?
        Еще раз СПАСИБО !

        Ответить
  • Сергей: 13 марта, 2016 в 22:57

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

    Ответить
    • driver: 14 марта, 2016 в 01:24

      Посмотрел, разгрёб весь фарш, получилось так: держите
      При использовании иконки большего размера(в примере 16px) следует подкорректировать внутренние отступы в label. Например если иконка размером 30px Х 30px, то необходимо увеличить отступ от левого края, тем самым высвободив место для размещения иконки, примерно так:
      padding: 15px 15px 15px 48px;
      Ну, и подправить расположение самой иконки в label[for*='1']:before, уменьшить расстояние от верхнего края, так чтобы иконка смотрелась симметрично, например, выставьте значение top: 8px; при размерах иконки 30px Х 30px.

      Ответить
  • Сергей: 14 марта, 2016 в 10:25

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

    Ответить
  • Дмтрий: 16 марта, 2016 в 11:37

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

    Ответить
    • driver: 16 марта, 2016 в 12:22

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

      Ответить
  • Дмитрий: 5 апреля, 2016 в 14:00

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

    Ответить
  • Логгер: 25 апреля, 2016 в 19:32

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

    Ответить
    • driver: 25 апреля, 2016 в 22:21

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

      Ответить
  • Алексей: 30 апреля, 2016 в 01:07

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

    Ответить
    • driver: 30 апреля, 2016 в 21:51

      Здравствуйте, Алексей.
      В табах я использовал тег <section> с display: none; по-умолчанию
      Предполагаю, что в вашем шаблоне этот тег тоже используется, отсюда и конфликт.
      Попробуйте в css связать секции с вкладками: .tabs section
      Более подробно отвечал уже: тынц

      Ответить
  • Алексей: 4 мая, 2016 в 22:28

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

    Ответить
  • Алексей: 4 мая, 2016 в 23:02

    Просмотрел код comments.php оказывается у меня в нем есть и section, и input, и lable в итоге стили вкладок применились к полям формы комментариев. Возможно ли их как то различить?
    Я просто новичок во всем этом деле!

    Ответить
    • driver: 5 мая, 2016 в 00:04

      В CSS для этих элементов используйте селекторы потомков, например .tabs section, или .tabs > section. Тоже самое и с input, и label
      Скорее всего, корректно сработают селекторы такого типа .tabs > section, .tabs > input и .tabs > label. В этом случае селектор будет выбирать непосредственно только дочерние элементы блока div с классом .tabs

      Ответить
      • Алексей: 5 мая, 2016 в 00:21

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

        Ответить
  • Алексей: 12 мая, 2016 в 14:25

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

    Ответить
    • driver: 12 мая, 2016 в 20:58

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

      Ответить
  • Вадим: 19 июля, 2016 в 19:49

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

    Ответить
    • driver: 20 июля, 2016 в 00:33

      Здравствуйте, Вадим.
      Конечно возможно, используя эффекты перехода(transition), трансформации(transform) или анимацию(animation), благо CSS3 предоставляет практически неограниченные возможности для этого.
      Эффект fade, например, можно легко воспроизвести с помощью перехода свойства opacity от 0 до 1, т.е. от полной прозрачности элемента до его непрозрачности. В паре с трансформациями можно вообще творить чудеса.
      Slide-эффект тоже самое, трансформации и переходы. С помощью этих универсальных свойств вы сможете создавать простые анимации для элементов, вкладки не исключение.
      Более сложные анимации реализуются объединением простых с помощью правила CSS @keyframes.
      Что касаемо данных вкладок, набросал для вас пример простейшей анимации: тынц >>
      При этом не забывайте, что css-анимации поддерживаются современными браузерами, в IE9- поддержка отсутствует напрочь.

      Ответить
  • Вадим: 20 июля, 2016 в 12:50

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

    Ответить
    • driver: 20 июля, 2016 в 16:15

      В предыдущем ответе, я специально в примере(см.ещё раз) прописал селекторы с вложенностью, явно указав дочерние селекторы для переключателей вкладок .tabs > input и .tabs > label, т.е. использовал дочерние селекторы, поэтому все стили установлены именно для этих селекторов и не дадут никакого результата для форм внутри тега <section>. В первую вкладку положил простейшую контактную форму: см.пример, как видите форма отображается по-умолчанию)))
      Вы можете стилизовать поля формы как угодно, влиять на стили переключателей вкладок стили формы уже не будут.

      Ответить
      • Вадим: 20 июля, 2016 в 16:39

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

        Ответить
  • Сергей: 30 июля, 2016 в 13:06

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

    Ответить
  • Vortex: 20 августа, 2016 в 16:44

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

    Ответить
  • Kartoha: 29 августа, 2016 в 07:42

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

    Ответить
    • driver: 29 августа, 2016 в 08:32

      Пропишите атрибут checked в теге <input> нужной вам вкладки. Например, для второй вкладки будет так:
      <input id="tab2" type="radio" name="tabs" checked>
      По-умолчанию, в примере, при загрузке открыта первая вкладка

      Ответить
      • Kartoha: 29 августа, 2016 в 13:52

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

        Ответить
  • Андрей: 30 августа, 2016 в 13:10

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

    Ответить
  • Oksana: 14 сентября, 2016 в 16:24

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

    Ответить
  • lesya_kinoman: 15 октября, 2016 в 03:06

    Доброго времени!
    Табы понравились, но хотелось спросить можно по вашем табам переделать вот такие скрывающиеся кнопки, что бы они скрывались и открывались и закрывались по горизонтали.
    cssdeck.com/labs/e6ribpyb ?
    P.s
    то есть применить к вашим тамтам ихний стиль CSS.

    Ответить
  • Елена: 16 ноября, 2016 в 17:28

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

    Ответить
  • Сергей: 29 ноября, 2016 в 17:09

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

    Ответить
  • Сергей: 29 ноября, 2016 в 18:09

    Нашел решение. Елена, необходимо обернуть input и section в тег form
    <div class="tabs">
    <form>
    //код
    </form>
    </div>

    Ответить
  • Сергей: 12 декабря, 2016 в 21:39

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

    Ответить
    • driver: 12 декабря, 2016 в 22:07

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

      Ответить
      • Сергей: 12 декабря, 2016 в 22:52

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

        Ответить
  • Сергей: 14 декабря, 2016 в 23:06

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

    Ответить
  • Сергей: 17 декабря, 2016 в 22:22

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

    Ответить
    • driver: 17 декабря, 2016 в 22:54

      Здравствуйте Сергей.
      Добавьте анимацию к параграфам внутри табов:
      .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

      Ответить
      • Сергей: 17 декабря, 2016 в 23:54

        Спасибо огромнейшее!!!

        Ответить
  • Леся: 19 декабря, 2016 в 23:49

    Спасибо, табы прикольные, только у меня почему то не работают как адаптивные на телефоне — igra-flash.ru/sonata-dask-dazzlings/ , просто контент в ряд на телефоне, табов нет, подскажите, что не так?

    Ответить
  • Александр: 22 декабря, 2016 в 09:48

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

    Ответить
    • driver: 22 декабря, 2016 в 17:48

      И вам не хворать.
      Просто, если вам совсем не нужны шрифт-иконки в заголовках вкладок закомментируйте или напрочь исключите следующее:
      .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;
      }
      }

      Посмотреть пример того что получилось и поковырять код можете здесь

      Ответить
  • Александр: 22 декабря, 2016 в 18:26

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

    Ответить
    • driver: 22 декабря, 2016 в 20:03

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

      Ответить
  • Evgen: 30 декабря, 2016 в 20:10

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

    Ответить
  • Evgen: 30 декабря, 2016 в 20:12

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

    Ответить
    • driver: 30 декабря, 2016 в 21:40

      Всё будет работать если стили табов поместите в конец файла engine.css, это что бы потом не потеряться, относительно вашей html-разметки табов, фарш css для них будет таким:

      /* Базовый контейнер табов */
      .tabs-fullstory {
      min-width: 320px;
      max-width: 800px;
      padding: 0px;
      margin: 0 auto;
      }
      /* Стили секций с содержанием */
      .tabs-fullstory > section {
      display: none;
      padding: 15px;
      background: #fff;
      border: 1px solid #ddd;
      }
      .tabs-fullstory > 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;
      }
      }
      /* Прячем чекбоксы */
      .tabs-fullstory > input {
      display: none;
      position: absolute;
      }
      /* Стили переключателей вкладок (табов) */
      .tabs-fullstory > label {
      display: inline-block;
      margin: 0 0 -1px;
      padding: 15px 25px;
      font-weight: 600;
      text-align: center;
      color: #aaa;
      border: 0px solid #ddd;
      border-width: 1px 1px 1px 1px;
      background: #f1f1f1;
      border-radius: 3px 3px 0 0;
      }
      /* Шрифт-иконки от Font Awesome в формате Unicode */
      .tabs-fullstory > label:before {
      font-family: fontawesome;
      font-weight: normal;
      margin-right: 10px;
      }
      .tabs-fullstory > label[for*=”1″]:before {
      content: “\f19a”;
      }
      .tabs-fullstory > label[for*=”2″]:before {
      content: “\f17a”;
      }
      .tabs-fullstory > label[for*=”3″]:before {
      content: “\f13b”;
      }
      .tabs-fullstory > label[for*=”4″]:before {
      content: “\f13c”;
      }
      /* Изменения стиля переключателей вкладок при наведении */
      .tabs-fullstory>label:hover {
      color: #888;
      cursor: pointer;
      }
      /* Стили для активной вкладки */
      .tabs-fullstory > input:checked + label {
      color: #555;
      border-top: 1px solid #009933;
      border-bottom: 1px solid #fff;
      background: #fff;
      }
      /* Активация секций с помощью псевдокласса :checked */
      #tab1:checked ~ #content1,
      #tab2:checked ~ #content2,
      #tab3:checked ~ #content3,
      #tab4:checked ~ #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, для меня вопрос…Так что из этого файла ненужное(стили табов) подчистите

      Ответить
  • Evgen: 31 декабря, 2016 в 17:38

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

    Ответить
  • Evgeniya: 6 февраля, 2017 в 12:41

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

    Ответить
  • Evgeniya: 6 февраля, 2017 в 13:23

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

    Ответить
    • driver: 6 февраля, 2017 в 18:10

      Здравствуйте, 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, а с помощью медиа-запросов можете настроить изменения вкладок (внешие и внутренние отступы, размер шрифта, рамка) при просмотре на малых экранах
      Не знаю, угадал ли я то что вам нуна, но набросал небольшой пример: тынц
      В примере сделал рабочими вкладки до буквы «Й» включительно, просмотрите весь фарш и если это оно самое, дальше, думаю, принцип дальнейших действий вам будет понятен )).

      Ответить
      • Evgeniya: 6 февраля, 2017 в 19:49

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

        Ответить
      • Evgeniya: 6 февраля, 2017 в 20:03

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

        Ответить
      • Evgeniya: 6 февраля, 2017 в 21:51

        Вопрос решился просто font-size: 1

        Ответить
      • Evgeniya: 7 февраля, 2017 в 10:25

        Может это все кому-то поможет 🙂 Спасибо!

        Ответить
  • Jack: 22 февраля, 2017 в 00:20

    Спасибо! )

    Ответить
  • HardHardy: 22 мая, 2017 в 14:03

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

    Ответить
    • driver: 22 мая, 2017 в 14:28

      Не совсем понял вопрос, первая вкладка и так открыта при загрузке, по крайней мере в демо, всё именно так. Отвечает за то, какая из вкладок загружается открытой атрибутchecked в теге <input>, на примере первой вкладки это будет выглядеть так:
      <input id="tab1" type="radio" name="tabs" checked>

      Ответить
      • HardHardy: 22 мая, 2017 в 17:17

        И в правду, прошу прощения. Видать при копировании в кмске друпала код сбился.

        Ответить
  • Владимир: 29 мая, 2017 в 23:50

    Спасибо за статью. Хотелось бы спросить. Можно ли сделать так, чтобы загружался (в коде страницы) только текст активной вкладки? Если поможете, буду благодарен.

    Ответить
    • Кирилл: 2 марта, 2018 в 09:42

      Сначала добавляем функцию.
      <script>
      function showContent(link) {
      var cont = document.getElementById('content');
      var loading = document.getElementById('loading');
      cont.innerHTML = loading.innerHTML;
      var http = createRequestObject();
      if( http )
      { http.open('get', link);
      http.onreadystatechange = function ()
      { if(http.readyState == 4)
      { cont.innerHTML = http.responseText; } }
      http.send(null); }
      else
      { document.location = link; } }
      // ajax объект
      function createRequestObject()
      { try { return new XMLHttpRequest() }
      catch(e)
      { try { return new ActiveXObject('Msxml2.XMLHTTP') }
      catch(e)
      { try { return new ActiveXObject('Microsoft.XMLHTTP') }
      catch(e) { return null; } } } }
      </script>

      Затем в менюшку добавить обработчик нажатия.
      <div class="tabs">
      <input id="tab1" type="radio" name="tabs" checked onClick="showContent(\'page1.html\')">
      <label for="tab1" title="Wordpress">Wordpress</label>
      <input id="tab2" type="radio" name="tabs" onClick="showContent(\'page2.php\')">
      <label for="tab2" title="Windows">Windows</label>
      <input id="tab3" type="radio" name="tabs" onClick="showContent(\'page3.html\')">
      <label for="tab3" title="HTML5">HTML5</label>
      <input id="tab4" type="radio" name="tabs" onClick="showContent(\'page4.html\')">
      <label for="tab4" title="CSS3">CSS3</label>
      <section id="content-tab1">
      </div>';

      Всё остальное лишнее. Сразу после грузим содержимое активной вкладки.
      <div id="content">
      <!-- CONTENT -->
      </div>
      <div id="loading" style="display: none">
      Идет загрузка...
      </div>

      Загружаем содержимое первой вкладки при первоначальной загрузке страницы.
      <script>
      showContent("page1.html")
      </script>

      Как то так. Ну и надо на всякий случай убедиться, что jquery подключён.

      Ответить
  • Mr.Happy: 31 мая, 2017 в 15:13

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

    Ответить
  • Андрей: 28 июля, 2017 в 09:56

    Здравствуйте!
    Третий день мучаюсь и хоть ты стреляй не могу сделать…
    Как сделать так, чтобы на уровне вкладок был свой фон, но все работало? Не у вкладки свой фон, а именно на уровне вкладок (содержимое вкладок должно оставаться без фона).
    Пытался оборачивать вкладки (заголовки) в span, div, без вопросов фон появляется. Но тогда не работает само содержимое вкладок… То не переключается, то показывается все, то ничего не показывается. Бред какой-то…
    Помогите, пожалуйста.
    Спасибо!

    Ответить
    • Владимир: 31 июля, 2017 в 15:18

      Измените свойство background на свой цвет: к примеру background: #000; фон вкладок станет черный.

      Ответить
      • Андрей: 31 июля, 2017 в 17:18

        Дело в том, что мне нужен общий фон для всех вкладок

        Ответить
  • Даниил: 28 августа, 2017 в 20:55

    Здравствуйте, реально реализовать вложенные вкладки на css ?

    Ответить
    • driver: 28 августа, 2017 в 22:00

      Здравствуйте. Реально ))

      Ответить
  • Lera: 2 сентября, 2017 в 02:34

    Спасибо! 🙂

    Ответить
  • Алексей: 10 сентября, 2017 в 23:10

    Я решил для себя оставить только 2 вкладки, и решил проставить для вкладки ширину 50%, но они перескакивают друг над другом, 49.7% более менее, но остается место.
    Подскажите где что нужно прописать что бы 2 вкладки были шириной по 50%.

    Ответить
  • Дмитрий: 15 сентября, 2017 в 16:54

    а как сделать что бы вкладки были внизу всего текста? что то не получается((

    Ответить
  • Игорь: 19 сентября, 2017 в 16:11

    Подскажите пожалуйста, а как сделать так, чтобы по ссылке открыть нужный таб?

    Ответить
  • docjers: 24 октября, 2017 в 14:34

    Взял Ваш метод, подскажите как сделать вложение вкладок? 3 вкладки в них еще по 5 штук в каждой из пяти вкладок есть разные изображения по теме. вкладки в вкладках я сделал, но изображения контенто пяти вкладок не выводить, добился что бы выводился через ховер, но так не удобно так как только пользователь убирает мышку картинки пропадают, :active :link и т.д пробовал не работает. Как сделать рабочую вложенность с рабочим отображением контента?

    Ответить
    • driver: 24 октября, 2017 в 17:58

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

      Ответить
      • docjers: 25 октября, 2017 в 13:35

        Та в том то и дело что мне нужно без скриптов, на чистом цсс, я почти доработал вашу разработку, еще чуть уберу пару дефектов, поделюсь доработкой.

        Ответить
  • Evgen: 6 ноября, 2017 в 05:13

    Доброго времени суток.
    Попутно возник еще вопросик: как сделать якоря для каждой вкладки чтобы на них можно было ссылаться с других страниц?

    Ответить
  • Nick: 30 ноября, 2017 в 21:43

    супер. чистая классная верстка. вот только в скачанных файлах все окей а сдесь в примерах кода не совпадают дентифкаторы. то ли в css надо вместо content-tab1-4 написать просто content1-4 то ли в эйштиэмел дописать до контентов табы

    Ответить
    • driver: 30 ноября, 2017 в 22:20

      Спасибо, Nick.
      Исправил, внёс изменения в фарш html

      Ответить
  • Иван: 30 декабря, 2017 в 14:43

    Здравствуйте. Подскажите, можно ли убрать расстояние между переключателями вкладок?

    Ответить
  • Кирилл: 1 марта, 2018 в 23:44

    Шикарно! Спасибо огромное. Вот только курсор местами бысто дёргается с ссылочного на обычный/текстовый.

    Ответить
  • kankul: 24 июня, 2018 в 02:18

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

    Ответить
  • lockstockoff: 24 июня, 2018 в 14:54

    здравствуйте! такой вопрос…все вкладки изначально закрыты…почему не срабатывает checked в html коде при загрузке страницы, чтобы одна вкладка была открытой…при нажатии все работает…
    если type=radio поменять на type=checkbox, то checked срабатывает…но необходимо это для type=radio…подскажите, пожалуйста, в чем может быть проблема…

    Ответить
  • Михаил: 26 июня, 2018 в 14:39

    При реализации под свой проект столкнулся со следующей проблемкой…Вкладки использую в карточках товара интернет-магазина…в одной вкладке размещаются ОПТОВЫЕ цены, количество выбранного товара, итоговая сумма конкретного товара и кнопочка добавления в корзину, а в другой вкладке — РОЗНИЧНЫЕ цены, количество и далее по аналогии…Естественно все это находится в цикле и распечатывается со своим уникальным id…все работает хорошо…кроме одной единственной мелочи…НЕ СРАБАТЫВАЕТ указанный в html-коде атрибут CHECKED, т.е. вкладки изначально получаются закрытыми…при нажатии и переключении — все норм!..атрибут name=”tabs” у всех одинаковый…в чем может быть проблема? Вроде мелочь, а потратил уже неделю на поиск правильного решения…Премного благодарен…

    Ответить
  • Евгений: 8 ноября, 2018 в 17:51

    Здравствуйте. Подскажите как сделать, что бы при загрузке страницы открылась первая вкладка. У меня всего их 2 и открывается вторая.
    И как можно поменять стили когда вкладка активна и когда не активна. Спасибо.

    Ответить
    • driver: 8 ноября, 2018 в 22:56

      Здравствуйте Евгений.
      Отвечал нераз, но походу комменты мало кого интересуют ))), да и в самой статье, вроде бы написано, но приходится повторяться
      Эа то какая вкладка будет активной отвечает атрибут checked, который прописываете в тег <input> нужной вам вкладки, например, в демо при загрузке открытой является 1 вкладка:

      <input id=”tab1″ type=”radio” name=”tabs” checked>
      <input id=”tab1″ type=”radio” name=”tabs” checked>

      Соответственно, если у вас открывается вторая, выпиливаете из <input id="tab2" type="radio" name="tabs" checked> атрибут checked и прописываете его в первый input с идентификатором id="tab1".
      Настраивать стили вкладок довольно просто, в css специально прописал комментарии поясняющие, какой фрагмент кода за что отвечает, посмотрите внимательно, как в самой статье, так и в исходниках демо.

      Ответить
      • Евгенйи: 9 ноября, 2018 в 12:29

        Спасибо, огромное!!!

        Ответить
  • Александр: 19 ноября, 2018 в 18:35

    Тоже интересен данный вопрос

    Ответить
  • Сергей: 9 декабря, 2018 в 00:43

    Здравствуйте! Помогите разобраться, пожалуйста. Вот здесь упрощенный вариант табов с одной вкладкой/секцией. Секция содержит картинку слева (оформление взял у Вас из отзывчивого аккордеона) и обтекающий картинку текст. При небольшом количестве текста картинка выпирает по высоте за пределы бордера секции. Что можно сделать, чтобы картинка влияла на вертикальный размер секции также, как сейчас это делает текст? Чувствую, что надо картинку обернуть в какой-то тег,или класс присвоить, но пока это не помогло (класс .teni). С уважением, и спасибо заранее!

    Ответить
    • driver: 9 декабря, 2018 в 03:09

      В селектор .tabs > section добавьте свойство overflow: hidden;
      Картинку оборачивать ни в какой тег особой нужды нет, достаточно в css использовать селектор такого вида .tabs img {...}
      Оформление текста внутри секций вкладок осуществляете в .tabs > section > p, т.е. при необходимости изменяете или добавляете нужные вам свойства, прописываете начертание шрифта, размер и цвет, например
      Примерно так: Тынц

      Ответить
      • Сергей: 9 декабря, 2018 в 12:12

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

        Ответить
  • Сергей: 11 марта, 2019 в 23:55

    Здравствуйте! Помогите пожалуйста. Несколько дней борюсь с тем, чтобы выровнять правый label (второй переключатель, а их всего два) по правому краю вровень с правым краем секций. При этом надо чтобы и первый оставался вровень с левым краем. Пробовал внутренними отступами в переключателях и шириной секций, но на некоторых экранах пару пикселей нет-нет, да съезжает. Вот тут пример
    Заранее спасибо большое за помощь. С уважением.

    Ответить
    • driver: 13 марта, 2019 в 11:01

      Сергей, здравствуйте.
      Посмотрите вот такой вариант, в котором используется список ul в качестве базового контейнера вкладок. Думаю, оформление элементов(цвет, шрифт, отступы и т.д.), легко подгоните под свой дизайн.
      И ещё, обязательно проверяйте работу таких решений на мобильных устройствах.

      Ответить
      • Сергей: 13 марта, 2019 в 16:06

        Большущее спасибо!

        Ответить
  • Алексей: 8 апреля, 2019 в 20:41

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

    Ответить
    • driver: 8 апреля, 2019 в 20:59

      Здравствуйте, Алексей.
      В моём примере, при обновлении страницы так же активной всегда является та вкладка, в переключателе(тег <input>) которой прописан атрибут checked, так что запомнить позицию выбранной вкладки, в данном решении без использования js просто не получится.

      Ответить
      • Алексей: 8 апреля, 2019 в 22:01

        Спасибо за ответ. А привести скрипт с данного примера не могли бы?

        Ответить
      • Алексей: 9 апреля, 2019 в 12:43

        Пардон, браузер видимо кешировал, в хроме перекидывает так же на первую.

        Ответить
  • Алексей: 20 апреля, 2019 в 11:12

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

    Ответить
    • driver: 20 апреля, 2019 в 18:30

      День добрый!
      Такой косяк прослеживается именно в онлайн-редакторе jsfiddle, но по правой кнопе мыши или с target="_blank" всё ок, a с http клик проходит, но во фрейме редактора пустота, так что на рабочем сайте или локалке всё буде нормально.

      Ответить
  • Alex: 16 мая, 2019 в 17:05

    Все понятно написано. И красиво получилось

    Ответить
  • Юрий: 30 мая, 2019 в 14:15

    Здравствуйте. Спасибо за информацию. Но, подскажите, пожалуйста, как сделать два разных блока с табами на одной странице.
    Если просто копирую и меняю название вкладок и их содержимое, во втором блоке содержимое не отображается.

    Ответить
    • driver: 30 мая, 2019 в 21:24

      Всё довольно просто, примерно так: Тынц
      Для второго блока вкладок меняете идентификаторы у <input>, <label> и <section> В атрибуте name="..." тегов также прописываете уникальное значение. Будьте внимательны, ваше волшебное слово здесь не прокатит))).
      В css в раздел активации секций добавляете правила в соответствии с заданными id, примерно так, #tab1-1:checked ~ #content-tab1-1 и т.д. по каждой вкладке. В песочнице всё прекрасно видно по селекторам, надеюсь не потеряетесь)).
      С иконками по тому же принципу, в селекторах типа .tabs > label[for*="1"]:before работаете с значениями в label[for*="..."]

      Ответить
      • Юрий: 30 мая, 2019 в 23:16

        Спасибо 🙂 и за «тыц» (сейчас попробую) и за то, что обратили внимание на «волшебное слово» 🙂

        Ответить
      • Юрий: 30 мая, 2019 в 23:36

        Спасибо, еще раз, все получилось.

        Ответить
  • Рамиль: 4 ноября, 2019 в 19:05

    Здравствуйте, не могли бы подсказать, один момент. здесь задано name=”tabs” и без этого атрибута section не становится обратно display: none, а просто появляется над или под другим содержимым вкладок. Почему так происходит?

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>