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

Добавил пользователь Евгений Кузнецов
Обновлено: 04.10.2024

Для начала реализуем логику для вкладок, которые мы сверстали выше.

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

Отличие данного способа в том, что порядок расположения кнопок и порядок расположения блоков контента в HTML-структуре могут не совпадать, при этом переключение будет работать корректно, что невозможно при реализации вкладок по индексу

Код с комментариями

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

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

Функция c параметрами

Добавим для примера еще один блок с вкладками

Теперь при объявлении функции tabs указываем параметры, которые будет принимать функция

При вызове функции, все параметры обязательны для ввода, и порядок передаваемых параметров должен соблюдаться

JavaScript код с комментариями

Получаем следующий результат - вкладки активны

Home lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia sit, repellat assumenda excepturi minima debitis atque nulla quibusdam iste eligendi voluptas, obcaecati nihil necessitatibus vel illum itaque ea molestias vero! Home lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia sit, repellat assumenda excepturi minima debitis atque nulla quibusdam iste eligendi voluptas, obcaecati nihil necessitatibus vel illum itaque ea molestias vero!

Portfolio lorem ipsum dolor sit amet, consectetur adipisicing elit. Id magni sit, enim tenetur animi eius ea, similique optio nostrum quibusdam ex, dolores dolorem. Recusandae quo molestiae modi saepe ratione numquam!

About lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia quibusdam nemo qui numquam magnam! In sunt, ut cum nulla, accusantium mollitia et illum voluptate repudiandae! Magnam alias, iure saepe animi.

Contact lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, ullam ducimus et facere nisi a dicta, ea, quae minima sequi expedita facilis doloremque excepturi, earum soluta magni! Dolores, expedita, ea.

Вкладки на основе JavaScript классов

Для разнообразия/сравнения, можем также написать функциональность вкладок на основе JavaScript классов

Чтобы познакомиться с JavaScript классами, внизу статьи будут ссылки на документацию

В данном примере просто посмотрим еще один способ

В качестве параметров будем передавать JavaScript объект, а также выделим некоторую функциональность в отдельные методы

Код с комментариями

Итоги

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

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

Самый простой пример реализации табов на сайте. Код максимально простой и легкий, не нужно никаких сторонних библиотек (кроме jquery) и никакого лишнего громоздкого кода. Весь HTML можно поменять под свою верстку, только не забудьте тогда поменять и код в скрипте, и в CSS.

HTML для табов

Если, например, необходимо, чтобы по умолчанию отображался второй блок, тогда нужно переместить класс .active во второй блок div.tabs__content , а также переместить класс .active во второй элемент в списке вкладок.

Обязательные CSS-стили для вышеуказанного HTML-кода

Для красивого отображения на сайте нужно использовать свои стили.

Подключаем jQuery перед скриптом

JS-скрипт для табов

Данный код вы помещаете в свой файл скриптов, если такого нету, то создаете его, например, scripts.js и подключаете после jquery таким образом:

Пример табов, в котором запоминается активная вкладка после перезагрузки страницы (с помощью cookie)

Пример табов, в котором запоминается активная вкладка после перезагрузки страницы (с помощью cookie). HTML и CSS остается тот же, меняется только скрипт.

Пример табов, в котором запоминается активная вкладка после перезагрузки страницы (с помощью localStorage, меньше кода по сравнению с cookie)

Пример табов, в котором запоминается активная вкладка после перезагрузки страницы (с помощью localStorage, меньше кода по сравнению с cookie). HTML и CSS остается тот же, меняется только скрипт.

Пример табов, в котором при переходе по ссылке с якорем, указывающим на номер таба, активируется соответствующий таб

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

Полностью рабочий пример jquery-табов со своими стилями в вертикальном и горизонтальном виде:

Сам скрипт целиком и полностью взят с сайта dimox.name

Рекомендую к прочтению:

Комментарии (23) к “Простой jQuery-скрипт для табов (вкладок)”

Evgeniya

Aleksander

После перебирания мегатонн говнокода наконец то я нашла НОРМАЛЬНЫЙ легкий корректный код и видит Всевышний, я не люблю плагиат, но я только учусь, а сама так не написала бы. Надеюсь, вы не очень сердитесь. что я его позаимствовала и зверски расковыряла) Но даже это он пережил и позволил реализовать табы в табах. Большое человеческое спасибо.

Максим

Для тех, кто учится, весь код – хороший. Нужно самому учиться писать не говнокод.

Alexander

Огромное Вам спасибо! Вы мне сэкономили кучу времени!

А как сделать так что бы вкладка после обновления страницы оставалась на том же?

Denis Creative

Нужно использовать немного другой скрипт, с использованием localStorage:

Руслан

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

Denis Creative

Попробуйте такой HTML:

Я проверил, вроде бы работает.

Здравствуйте.
Спасибо за материал.
Подскажите, пожалуйста, как дополнительно сделать, чтобы при переходе по ссылке несколько элементов с табами переключались?
Чтобы понятнее было: у меня 5 блоков, в каждом по 3 вкладки. Над ними 3 кнопки. Необходимо, чтобы по нажатию кнопки 1-3, раскрывались табы 1-3.
Вариант с якорем, к сожалению, раскрывает только 1ый элемент.

Почемуто Четвертая вкладка через букву р(Червертая ) :) самое смешное что по ссылке оригинала тоже самое:)

Denis Creative

Ну я не писал этот код с нуля) Спасибо за замечание, исправил.

Георгий

только я хотел позаимствовать ваш вариант табов, но… в мобильной версии, когда из-за маленькой ширины экрана закладки встают друг над другом, чтобы выбрать таб, надо нажимать на 50px ниже, чем его закладка находится :) садитесь, два =(

Denis Creative

1. Скрипт рабочий.
2. Стили для мобильного вы можете написать любые.
3. В примере стили и скрипты упрощены до минимума, чтобы понять логику скрипта.

Степан

Спасибо за самый рабочий и минималистичный пример!
Но вот такой вопрос: А можно ли при 3-4 вкладках сделать некоторые из них неактивные?

Denis Creative

Это как. Можно подробнее?

Степан

Прошу прощения за столь долгий ответ. Проблему я уже решил.
Например, на сайте всегда присутствует несколько разделов (3-4), но на определенных страницах некоторые из разделов не имеют информации, и эти разделы необходимо скрыть, не скрывая кнопки. Решение простое – сделать неактивными сами кнопки (спокойно делается через CSS).
Но вот другой вопрос: на странице есть заголовки, на которые можно перейти в меню разделов. За меню и заголовками закреплены определенные id.

Также на этой странице присутствует несколько вкладок. Как сделать, чтобы меню тоже менялось при смене вкладок?
Просто заметил особенность – скрипты и даже стандартные переходы по разделам не работают уже на 2 вкладке. На 1 все в порядке.

Denis Creative

Добавьте пример на codepen.io – там будет понятнее, какие блоки существуют и как они выглядят, что должно происходить.

Степан

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

Загвоздка в том, что в моем случае вкладки используются для, практически, одного и того же контента, за исключением некоторых блоков. В пример можно привести сайт с полезным советом для установки чего-либо. Один раздел отводится для Windows, другой для MacOS – чтобы пользователь знал, как действовать на любой из систем. Основные шаги одинаковые, но пути и некоторые действия различаются.

И почему-то никакие скрипты, работающие на 1 вкладке, не хотят работать ни на 2, ни на любой другой вкладке. Поэтому я подумал про смену контента в меню разделов, чтобы заменить id (ведь, скорее всего, для продублированного контента невозможно применить один и тот же скрипт). К слову, в моем проекте контент находится в теге article, а меню разделов – в теге aside.
Поэтому повторю вопрос: как сделать смену контента не только для основного блока, но и какого-нибудь другого на странице?

P.S.
Пока писал, нашел решение для смены меню разделов каждой вкладки. Просто меню вставить внутрь контента, немного поменяв стили… Но проблема с нерабочими скриптами на других вкладках остается актуальной.

Denis Creative

Интересно посмотреть на живой пример.

Denis Creative

Получил пример на почту.

1. На всей странице не должно быть одинаковых id – они уникальны и у каждого элемента должен быть свой id – это важно, из-за это и не работало меню.

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

3. Более правильно будет вынести правое меню внутрь каждого таба со своими id и своими ссылками для этих id.

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

Руслан

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

Верстальщик

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

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

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

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

первая вкладка
вторая вкладка
третья вкладка

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

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

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

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

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

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

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

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

Анонимный Благодарю. ornyse.ru Скажите а как сделать чтобы (CSS табы с переходом по наведению курсора мышки. Результат изменения сохраняется.) отображался на странице во всю ширину и длинну страницы? А то добавляешь например картинку а она со скролом , а когда переходишь на вкладку другую, картинку с другой вкладки видно, тоесть она торчит снизу обрезанная? NMitra "во всю ширину и длину страницы" - она и так во всю ширину.
во всю высоту я попробую один вариант. Чтобы не было видно хвоста

.korpus
.korpus label
.korpus input[type="radio"]:checked + label
.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) Анонимный Спасибо за материал. 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 ~ div:nth-of-type(6),

.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 ~ div:nth-of-type(6),

.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 ~ div:nth-of-type(6),

.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 ~ div:nth-of-type(6),

.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 ~ div:nth-of-type(6),

.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 ~ div:nth-of-type(6),

.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 ~ div:nth-of-type(5),

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

NMitra zloe-aloe спасибо большое! Денис Демин Здраствуйте, уважаемый автор ! Сначала хотелось бы поблагодарить за очень полезную статью и попросить помощи. Мне нужно сделать так : Вариант №1 идет как основной, а в третьей вкладке должен находиться вариант №2. Подскажите пожалуйста, как это реализовать ! ?

Если будет работать (я не проверяла), то скрипт уберёте в конец body maritca NMitra, никак не могу додумать. Мне нравится ваш третий вариант тем, что окно, если оно со скроллом, не скачет при переключении вкладок, но я не могу понять, что нужно изменить, чтобы вкладки менялись всё-таки при клике, а не по наведению. И можно ли не задавать высоту дивов, а сделать так, чтобы высота определялась для каждой вкладки автоматически? Я так попробовала, но у меня остаётся видимой часть дива с наибольшей высотой. Либо как изменить первый вариант так, чтобы окно не "прыгало". Или это невозможно со свободной высотой дивов? NMitra Окно не будет прыгать если будет задана фиксированная высота у вкладок. Высота вкладки меняется и она смещает вниз остальной контент. Можно сделать что-то типа всплывающего меню. Когда все вкладки сначала скрыты, а при нажатии на пункт меню появляются над контентом. Посмотрите как у Сбербанка сделано меню "Взять кредит", "Выбрать карту", "Накопить и сохранить", . Анонимный Здравствуйте. А можно ли поместить таб внутри таба? Пробовала на первом примере, не получилось. Анонимный NMitra, а у меня ИЕ 11 почему-то не поддерживает. Это же не старый браузер. Что-нибудь можно сделать? NMitra Здравствуйте, id должен быть индивидуальным, name должен быть индивидуальным каждого таба. То есть вот так:

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

.tab-block > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.tab-block > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.tab-block > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.tab-block > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.tab-block > input:nth-of-type(5):checked ~ div:nth-of-type(5),
.tab-block > input:nth-of-type(6):checked ~ div:nth-of-type(6),
.tab-block > input:nth-of-type(7):checked ~ div:nth-of-type(7),
.tab-block > input:nth-of-type(8):checked ~ div:nth-of-type(8),
.tab-block > input:nth-of-type(9):checked ~ div:nth-of-type(9)

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

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

Анонимный а как сделать, чтобы не было двойных границ? некрасиво же. NMitra Регулируется bottom, например,
bottom: 1px;
замените на
bottom: 0px;
или более подходящее вам значение. Exari Constantin А как в первом варианте добавить еще 2 вкладки?
.korpus > div, .korpus > input

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

Сергей Анатольевич Очень жаль, но первые 3 варианта не работают на родном браузере андроид устройств, будут ли какие рекомендации?
Прям совсем пичальбеда. Нужно реализовать список "популярные производители" - "все производители", решил воспользоваться вашим методом вкладок, но вылез вот такой жирный минус. Просто необходимы решения на чистом CSS, без JS во избежание проблем с индексацией поисковыми системами.
Спасибо. NMitra На CSS - это все возможные варианты: :checked, :target, :hover. Есть ещё :focus, но он в данном случае не в тему.

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

Вопрос №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 вкладок]

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

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

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

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

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

Изучаем популярные программы для работы с гитарными табулатурами.

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

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

За прошедшие десятилетия в среде редакторов табулатур выделился лидер, чьи ведущие позиции не меняются по сей день, — Guitar Pro. Редактор постоянно развивается и меняется, а разработчики пытаются превратить продукт в нечто большее. Такое положение нравится далеко не всем пользователям, так как большинство требует от подобных программ простоты и скорости работы.

Для тех, кто ищет удобный и простой редактор табулатур, или пытается найти бесплатную альтернативу Guitar Pro, редакция SAMESOUND выбрала 11 лучших программ для работы с гитарными табулатурами. Как видите, рынок табулатурного софта небезальтернативен.

Лучшие редакторы табулатур

Представленный список не исчерпывающий: в подборку попали только популярные и/или активно развивающиеся проекты. Большая часть программ распространяются на бесплатной основе.

Ряд программ, попавших в нашу подборку, представляют собой продвинутые нотные редакторы, о которых мы писали ранее в подборке лучших нотных редакторов. Благодаря возможности работать с табулатурами Guitar Pro/Power Tab Editor и удобству подготовки табулатур, мы включили их и в этот материал.

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

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