Как сделать красивые вкладки

Добавил пользователь Alex
Обновлено: 10.09.2024

В данной теме мы рассмотрим простой скрипт создания вкладок при помощи HTML и CSS.

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

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

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

Ниже Вы можете наблюдать пример создаваемых данным скриптом вкладок:

Размеры содержимого вкладок

могут отличаться по высоте!

Как видно из примера, содержимое каждой вкладки может быть различным по высоте, чего частенько не встретишь в других подобных скриптах (у них все вкладки одинаковые по высоте). Количество вкладок и их оформление также можно легко изменить.

При создании вкладок HTML разметка вкладок выглядит следующим образом:

div class= "tabs" >
input type = "radio" name = "inset" value = "" id = "tab_1" checked >
label for= "tab_1" > Вкладка №1 label >

input type = "radio" name = "inset" value = "" id = "tab_2" >
label for= "tab_2" > Вкладка №2 label >

input type = "radio" name = "inset" value = "" id = "tab_3" >
label for= "tab_3" > Вкладка №3 label >

input type = "radio" name = "inset" value = "" id = "tab_4" >
label for= "tab_4" > Вкладка №4 label >

div id = "txt_1" >
p > Произвольное содержимое . p >
p > Произвольное содержимое . p >
p > Произвольное содержимое . p >
div >
div id = "txt_2" >
p > Вторая вкладка p >
div >
div id = "txt_3" >
p > Размеры содержимого вкладок p >
p > могут отличаться по высоте ! p >
div >
div id = "txt_4" >
img src = "image/logo.jpg" width = "533" height = "77" alt = "Лого" >
div >
div >

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

В результате использования вот такого нехитрого кода можно значительно сэкономить место на страничках сайта и систематизировать размещение контента.

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

Вот что мы собираемся сделать в несколько больших шагов:

Примечание: Это руководство не нацелено на то, как сделать вкладки доступными, поэтому это безусловно, будет правильным следующим шагом.

1. HTML

Для начала рассмотрим требуемую разметку. У нас есть контейнер, который включает сами вкладки (элементы списка), а также содержимое каждой вкладки (панель вкладок). Чтобы связать вкладку с соответствующей панелью, мы используем пользовательский атрибут data-index , который содержит уникальное значение для каждой панели вкладок. Тем не менее, из-за нумерации, начинающейся с нуля, панель с data-index = 0 связана с первой вкладкой, панель с data-index = 1 связана со второй и так далее.

Вот разметка HTML:

2. CSS

В качестве следующего шага давайте укажем несколько правил CSS для нашего компонента. Ничего особенного, просто некоторые основные стили. Следует отметить, что мы не используем никаких переходов (например, fade, slide) для переключения между вкладками; вместо этого они появляются и исчезают с помощью простого переключателя on/off.

Вот начальные стили:

3. JavaScript

HTML и CSS на месте, теперь пришло время посмотреть на требуемый код JavaScript.

Каждый раз, когда мы нажимаем на вкладку, мы делаем следующее:

Удаляем класс active с соответствующей вкладки (по умолчанию первой) и с соответствующей панели вкладки (по умолчанию первой).
Находим родительский элемент li этой вкладки, добавляем к нему класс active и возвращаем его индекс.
Находим панель вкладок, значение атрибута которой (для атрибута data-index ) соответствует указанному выше значению индекса и присваивает ей класс active .

Вот результат кода JavaScript:

4. Делаем адаптивность

Наш компонент почти готов! Последнее, что нам нужно сделать, это сделать компонент адаптивным. Так, например, когда область просмотра имеет максимальную ширину 600 пикселей, она должна коллапсировать и выглядеть следующим образом:

Поскольку мы используем desktop-first подход, вот правила CSS, которые мы должны перезаписать:

5. Поддерживаемые браузеры

Наше демо хорошо работает во всех последних браузерах и устройствах. Как обычно, в моих руководствах мы используем Babel для компиляции кода ES6 до ES5.

Заключение

В этом кратком руководстве нам удалось создать полезный адаптивный компонент Вкладки с HTML, CSS и JavaScript. Опять же, этот компонент имеет не очень хорошую доступность, но если вы хотите улучшить его функциональность, это будет хорошим следующим шагом. Хорошего кода!

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

Пример разных видов переходов вкладок можно увидеть здесь:

Возможно вам понравится прошлый урок, где мы также создавали красивые вкладки — Красивые анимированные вкладки на CSS.

HTML часть

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

CSS часть

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

Вкладки будут похожи на элемент , но на самом деле мы будем нажимать на :

Так как не нужна нижняя часть тени для этого элемента, то мы используем псевдоэлемент :after с пустым значением свойства content:

Когда вкладка становиться активной, то у нее есть для этого свой стиль отображения. А также она становится поверх остальных. Делается это с помощью свойства z-index:

Итак, мы скрываем все остальные вкладки с помощью выставления opacity: 0. Мы не можем использовать свойство display: none, т.к. оно не поддерживает эффекты перехода:

Когда мы делаем вкладку активной, то выставляется значение opacity: 1, а также большой z-index:

Вывод

В этой статье мы создали вкладки на CSS3 и HTML5. Они красиво будут работать в современных браузерах. Разные виды переходов можно найти в примерах выше, а также скачать исходники и применять.

Успехов!

Создатель проекта "sitehere.ru". Сооснователь компании "Exore". В интернет-маркетинге с 2013 года. Специализируется на контент-маркетинге и SEO. Автор мини-книги "Как раскрутить сайт с нуля до 32 000 посетителей в месяц".

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

Введите Email ниже:

Ссылка на статью отправлена вам на Email.

10 комментариев к записи

Спасибо Юрий, за урок и за прояснение. Я немного на свой лад делал и вместо текста у меня формы на вкладках, по началу такая белеберда получилась, но сейчас разобрался вроде все ок.

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

Денис, придется тогда немного изменить CSS. Необходимо задавать background не для одного блока (сейчас белый фон задается для блока с классом "content"), в котором находятся все 4 вкладки, а для каждого отдельно в 106-й строке файла style.css.

Как сделать прямую ссылку на конкретную вкладку. Например, чтобы человек, нажав на ссылку, попал на 3 вкладку сразу? Якоря не работают ((

Николай, у активной вкладки есть атрибут checked. Его можно задавать динамически с помощью jQuery при нажатии на ссылку.

Но как реализовать это? Попадение на вкладку с ссылки. Подскажите пожалуйста

Доброго времени суток! Возможно как-нибудь сделать во вкладках вложенные вкладки? Пробовал скопировать в одну из вкладок код секции с вкладками, но при нажатии на любую из вложенных вкладок они все пропадают.

Добрый день, Владимир!

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

Сегодня мы создадим три вкладки (tabs), переключаясь между которыми, поочередно будет скрываться или снова показываться, содержимое всех вкладок.

В каких случаях целесообразно размещать контент на сайте во вкладках?

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

Я знаю, что начинающие веб-разработчики, "шарахаются" от нативного способа (с применением JS) делать подобные вкладки. Предпочитая, не вникать в технические детали, хватаются за готовый плагин на jQuery (смотрите урок по Easytabs) или берут готовый компонент на Bootstrap.

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

Демонстрация вкладок

HTML код вкладки

Внутри контейнера див с классом tab, создадим 3 кнопки-ссылки (названия городов) с классом tablinks, заранее повесим на кнопки события по клику и дадим название функции openCity. При клике по кнопке отработает эта функция, первым аргументом события будет - event.

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

Читайте также: