Доброго времени суток, уважаемые читатели блога Moi-tarakany.

CSS табы для сайта

Как-то я публиковал у себя в блоге статью о гармошке  для сайта в которой информация открывалась-пряталась по клику в горизонтальной спройлере. Сегодня хочу поделится похожей штукой — это «табы» информация в которых открывается во вкладках.

Для этого в то место на сайте где хотим видеть табы размещаем этот код:

<div class="korpus">
<input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">CSS</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">HTML</label><input type="radio" name="odin" id="vkl3"/><label for="vkl3">Дополнительно</label>
<div>первая вкладка</div>
<div>вторая вкладка</div>
<div>третья вкладка</div>
</div>

A в файл CSS добавляем следующий код:

.korpus > div, .korpus > input { display: none; }
.korpus label { padding: 5px; border: 1px solid #aaa; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; background: #fff; }
.korpus input[type="radio"]:checked + label { border-bottom: 2px solid #fff; }
.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 5px; border: 1px solid #aaa; }

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

P.S. Данный пример подсмотрел здесь.

С уважением, Мышак Пётр!

Похожие записи:

Понравилась статья? Расскажи друзьям, автор очень старался:
20 комментариев на:
“Табы для сайта на CSS без JavaScript”
  • Egor (1 comments) говорит:

    Красиво, удобно и доступно. Перелопатил кучу сайтов и только здесь нашел доступную и простую реализацию 🙂

  • Пётр (405 comments) говорит:

    Даже и не думал, что такое можно сделать без использования Java. По идее, и индексироваться лучше будет (хотя не факт). Но вот что уж тормозить наверняка не станет, это точно. На всякий случай сохраню страничку: вполне вероятно, что на будущих сайтах организую что-то подобное.

  • Екатерина (6 comments) говорит:

    Давно искала, как реализуются эти табы, но так и не нашла ответа на свой вопрос, а вскоре и вовсе забыла про него. Так что огромное Вам спасибо, наконец-то буду знать, как все это делается))) и код такой простой оказался, я почему-то думала, что он будет более мощным)))

  • Никита (11 comments) говорит:

    Ссылка на пример битая! Вопрос. Как вы думайте такие табы в сайдбар через виджет реально вывести? Хочется именно без плагина.

  • Денис (6 comments) говорит:

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

  • mojo-web (3 comments) говорит:

    очень грамотно всё сделано, спасибо Вам. Буду пользоваться

  • BiblSoft (9 comments) говорит:

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

  • Андрей (25 comments) говорит:

    Способ конечно гениальный 🙂 Никогда не пришло бы в голову использовать для этого чекбоксы. Но вот интересно, IE поддерживает такие CSS-селекторы?

  • Евгений (7 comments) говорит:

    Почему-то в firefox не подгружается содержимого 3 таба, в дпугих браузерах нормально? что это может быть?

  • ВНЖ (1 comments) говорит:

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

  • SEOшник (4 comments) говорит:

    Легковесные табы дорогого стоят. Больше спасибо. уже приделал на свой сайт 😉

  • farhad (1 comments) говорит:

    Большое спасибо. А есть еще такие css комбинация вместо javascript?

  • Екатерина (6 comments) говорит:

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

    • Пётр (405 comments) говорит:

      Вы имеете ввиду цвет текста? для этого в сточку

      .korpus input[type="radio"]:checked + label { border-bottom: 2px solid #fff; }
      добавляем атрибут color и задаем ему свойства, например: #37ab56. Получаем
      .korpus input[type="radio"]:checked + label { border-bottom: 2px solid #fff; color: #37ab56;}

      Цвет меняйте по своему вкусу.

      • Екатерина (6 comments) говорит:

        Все равно не получаются такие вкладки, как в вашем демо-примере (moi-tarakany.ru/primere-tab.html)

        Код в статье приведен один, а на демке у вас совсем другое, намного красивее.

        • Пётр (405 comments) говорит:

          вот мой css:

          .korpus > div, .korpus > input{display:none;}
          .korpus label{font-size:15px;font-weight:bold;padding:5px; line-height:28px;cursor:pointer; position:relative;bottom: 1px;background:#fff; margin-right:5px;border-radius:4px 4px 0 0;}
          .korpus input[type="radio"]:checked + label {border-bottom:2px solid #fff;color:#f10;}
          .korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
          .korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
          .korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) {display:block;padding:5px;}
          .tabs-primer{background:#fff;}
          .tabs-primer p{padding:15px;}

          • Екатерина (6 comments) говорит:

            Благодарю! Самый классный вариант!

  • Сергей (45 comments) говорит:

    Спасибо! Много перерыл, но Ваш вариант самый классный. Вот только не получается добавить еще одну вкладку. Не подскажете как? Див добавил, в CSS строчку дописал, вкладка добавилась, но содержимое нового таба видно изначально, оно не скрыто. Что-то я пропустил.

    • Сергей (45 comments) говорит:

      Разобрался. Все ок. Спасибо за хорошый пост.

  • Юрий (6 comments) говорит:

    Привет, Пётр!

    Решение классное для вкладок. Потому что здесь используется псевдокласс «:checked», а если заглянуть в спецификацию, то можно увидеть, что у него поддержка лишь: IE9+, что не может не радовать 🙂 .

Добавить комментарий

Перед комментированием ознакомтесь с правилами комментирования
  • Все комментарии проходят ручнуюю модерацию, поэтому большая прозьба - НЕ СПАМИТЬ!!!
  • Подписывайтесь нормальными именами, а не "регистрация в Москве" или "Кондиционеры не дорого".
  • Ссылки на коммерческие сайты будут удалятся.
  • Оставляйте ссылку на главную страницу.
  • Оставляйте комментарии длинной не менее 100 символов. Исключения - диалоги и ответы на заданные вопросы.
Внимание! Один раз в неделю блог прходит проверку на наличие битых ссылок. Если ваш сайт в это время не был доступен, ссылка на него будет удалена!
За собой оставляю право редактировать и удалять комментарии, даже если они удовлетворяют вышепреведённый свод правил.