Создание вкладок при помощи HTML и CSS
В данной теме мы рассмотрим простой скрипт создания вкладок при помощи HTML и CSS.
Вкладки, как правило, используются для экономии места при размещении большого количества информации на одной страничке.
При использовании вкладок посетитель может просмотреть без перезагрузки странички интересующую его информацию, просто кликнув по заголовку нужной вкладки.
Наш скрипт является легким и быстрым т.к. не использует JavaScript код или какие-либо плагины и библиотеки.
Ниже Вы можете наблюдать пример создаваемых данным скриптом вкладок:
Вкладка № 1 Вкладка № 2 Вкладка № 3 Вкладка № 4
Размеры содержимого вкладок
могут отличаться по высоте!
Как видно из примера, содержимое каждой вкладки может быть различным по высоте, чего частенько не встретишь в других подобных скриптах (у них все вкладки одинаковые по высоте). Количество вкладок и их оформление также можно легко изменить.
При создании вкладок HTML разметка вкладок выглядит следующим образом:
Для того чтобы вкладки функционировали и были похожи на те, что приведены в примере выше, в шапке сайта между тегами и добавьте следующие стили оформления:
< style type = "text/css" >
. tabs < width : 100 %; padding : 0px ; margin : 0 auto ; >
. tabs > input < display : none ; >
. tabs > div display : none ;
padding : 12px ;
border : 1px solid #C0C0C0;
background : #FFFFFF;
>
. tabs > label display : inline — block ;
padding : 7px ;
margin : 0 — 5px — 1px 0 ;
text — align : center ;
color : #666666;
border : 1px solid #C0C0C0;
background : #E0E0E0;
cursor : pointer ;
>
. tabs > input : checked + label color : #000000;
border : 1px solid #C0C0C0;
border — bottom : 1px solid #FFFFFF;
background : #FFFFFF;
>
#tab_1:checked ~ #txt_1,
#tab_2:checked ~ #txt_2,
#tab_3:checked ~ #txt_3,
#tab_4:checked ~ #txt_4 < display: block; >
В результате использования вот такого нехитрого кода можно значительно сэкономить место на страничках сайта и систематизировать размещение контента.
HTML + CSS
Вкладки для сайта
Вкладки на страницах сайта позволяют великолепно структурировать информацию, изначально скрывая какую-то её часть.
Создание вкладок позволяет экономить ГРОМАДНОЕ(!) количество места на сайте, что в свою очередь даёт возможность умещать «большое в малом».
Пример действующих вкладок Вы, если были, уже могли раньше видеть в разделе о jQuery UI .
Если же Вы ещё там не были, то для сравнения откройте эту страницу: «Умные вкладки» (откроется в новом окне) .
А здесь я покажу, по сути, такие же вкладки, но сделанные исключительно БЕЗ использования каких бы то ни было скриптов . Только HTML + CSS!
И, что самое интересное, они работают точно так же — при клике по ним, они открываются БЕЗ перезагрузки страницы .
Впрочем, чем читать мои восторженные слова об их достоинствах, лучше посмотрите, и сами увидите, как работают вкладки для сайта на этой странице. Покликайте по ним.
Я не знаю на каком устройстве Вы просматриваете сайт. Поэтому, прежде, чем кликать по вкладкам, сначала ознакомьтесь с дополнением к примеру. Вот оно:
Пример вкладок
Вкладка №1 Вкладка №2 Вкладка №3 Вкладка №4 Вкладка №5
Представленный пример создания и использования вкладок, отлично показывает возможности CSS для управления расположением элементов на странице.
Всё содержимое блоков вкладок прописывается в коде HTML, а вот их расположение и отображение, т.е. внешний вид, прописал в отдельной таблице стилей.
Содержимое вкладок может быть абсолютно произвольным: текст, ссылки, рисунки, аудио-плееры, видео, и т.д., и т.п.. Короче — всё, что только вздумается!
*Кстати! Под вкладкой №3 сможете проверить последнее утверждение, и послушать приятную музыку.
А вкладка №4 даст посмотреть интересное видео с YouTube, из которого Вы узнаете, чему нужно учиться, чтобы делать подобные вкладки с помощью скриптов.
Создание вкладок
Шапка с названиями вкладок создана с помощью тэгов «input», которым в атрибутах я установил тип «radio».
К тому же — атрибут «name» у всех input-ов в шапке вкладок одинаковый: «inset», что позволяет выбрать любую вкладку, а предыдущая, при этом, отключится.
В своём обычном состоянии , т.е. без их переопределения в дополнительной таблице стилей, они бы отображались маленькими кружочками. Вот такими: Ну, а как они выглядят сейчас, Вы видите.
Если нужно изменить цвет всех вкладок, либо цвет какой-то одной вкладки сайта, это очень легко делается в подключённой дополнительной таблице CSS .
Добавил интересную возможность(!) использования пустого тэга «input», прописав его с тем же именем прямо в контент вкладки. Попробуйте!
Закрыть все вкладки
*P.S. Этот пример прописал только в HTML-коде через атрибут «style». Таблицу стилей не трогал.
*В остальных вкладках такую кнопку делать не стал.*
Вторая вкладка. Специально сделал содержание, скрытое в ней, маленьким, чтоб было видно, что размер (высота) вкладки автоматически регулируется содержимым.
Желающие скачать себе этот курс (бесплатно) , найдут его здесь: «Полезное» (откроется в новом окне) .
Содержимое этой вкладки Вы можете не только читать, но и слышать. Конечно, если только Ваше устройство способно понимать файлы mp3.
В «Яндекс-браузере» такое установлено «по умолчанию», а вот в различных мобильных устройствах: планшетах, смартфонах возможно установлены другие кодеки. Но, скорее всего, они тоже понимают такие популярные файлы, и Вы сейчас видите аудиоплеер, и можете запустить его для прослушивания.
Желая перейти на любую другую вкладку, остановите аудиооплеер, а иначе звук его музыки всё равно будет слышно.
Если Вы не видите сейчас стандартный аудио-плеер, то стало быть, и не слышите приятную музыку, установленную в него. Как сделать плеер для вкладки сайта, можете узнать здесь: «Аудио и Видео на HTML» (откроется в новом окне) .
В этой же, четвёртой вкладке, сохранил для Вас уже целое видео. Сможете посмотреть вводный видео-урок по технологии JavaScript и jQuery .
Подключил его сюда, чтобы Вы могли оценить, насколько проще показанный способ создания вкладок для сайта с помощью одних лишь только HTML+CSS, чем делать это с использованием скриптов.
Желая перейти на другую вкладку, остановите видеоплеер, иначе звуковую составляющую урока всё равно будете слышать.
В своё время сам начинал учиться, а потом неоднократно возвращался к нему, тренируясь по этому великолепнейшему(!) обучающему курсу.
Результаты изучения, кого интересует, здесь: JAVASCRIPT (откроется в новом окне) .
А в этом примере вкладки Вы можете посмотреть, сколько(!) стороннего кода нужно для организации такого же эффекта средствами jQuery UI .
Этот скриншот взял со своего же сайта, со страницы «Современные технологии» (откроется в новом окне) .
На ней Вы сможете подробно узнать, для чего я такой скриншот сделал, да и вообще всю, указанную в ссылке страницу.
Действие показанного примера вкладок для сайта в точности совпадает с тем, ссылку на который я давал в начале страницы. НО! Количество кода здесь минимум в 10 раз(!) меньше, чем в аналогичном примере, созданном с помощью jQuery UI .
Дополнение к примеру вкладок
Надеюсь, продемонстрированный пример создания простых HTML + CSS вкладок для сайта Вам понравился. Мне — так очень!
И действительно. Трудно сказать, чего нельзя сделать с их помощью, причём, всё можно разместить компактно . Страница сайта не будет перегружена.
Проверяя сделанное на разных электронных устройствах, обнаружил, что НЕ ВСЕ они поддерживают такой простой способ создания вкладок для сайта.
На каких устройствах проверял? Вот на этих:
Так вот — смартфон с О.С. «Андроид» (он на фото нижний слева) категорически не хотел реагировать ни на смену вкладок, ни на свёртывание первой из них .
Остальные же электронные друзья: стационарный компьютер, ноутбук, планшет работали, как полагается.
**Да! Кстати!
У планшета та же самая операционная система, и такой же браузер «Google Chrome», но, видимо, не столь «замобиленный» , как у смартфона.
И в то же время — упомянутый в самом начале страницы способ создания таких вкладок с помощью jQuery UI , хоть и содержит очень много(!) кода, однако признаётся всеми устройствами БЕЗ ИСКЛЮЧЕНИЯ!
Вот такое дополнение к примеру вкладок . . . .
Надеюсь, оно поможет Вам решить, как лучше сделать вкладки на странице сайта.
А в дополнение к увиденному, посмотрите ещё один интересный раздел, внешние эффекты которого очень похожи на действие вкладок.
Такой раздел находится здесь: «Спойлер на JavaScript» (откроется в новом окне) .
Все права защищены. Copyright © 2009 — Коротеев Владимир.
Вкладки (страницы) на одной странице на html/css с помощью :target
Рассмотрим один из вариантов создания нескольких страниц или вкладок (в том числе вложенных) на html и css без скриптов, списков и таблиц, на одной html странице. Только дивы, только хардкор. Подходит для небольших портфолио и элементов интерфейса. Не будьте буратинами используя это везде подряд.
Суть:
Современные браузеры загружают содержимое только если блок виден, поэтому костыли для загрузки контента (картинок) отменяются.
Коротко: ссылка на блок делает его видимым, при том что по-умолчанию они невидимы (поэтому обратно display:none когда выделяем другие); сделать невидимым первый блок если выделен _не он_, так как по-умолчанию он виден. Собственно, это всё. Теперь реализация.
HTML. Разделим блок на 3 страницы и один на 3 вкладки, для наглядности:
#one #two #three #one #two #three #one #two #three Перейдём к разметке, здесь всё внезапно очень просто (но не очевидно) и валидно, никаких нестандартных изощрений:
div < display: none; >/* Делаем блок по-умолчанию невидимым */ div:target < display: block; >/* Выделенный блок видим */ /* Теперь магия, т.е. регулярные выражения, для удобства */ div[id*=t]:target ~ #one < /* Для всех блоков, содержащих "t" в идентификаторе, делаем #one невидимым */ display: none; >/* Обошлись одной буквой конкретно в этом случае, иначе придётся просто прописывать "tab" для всех вкладок сразу и отдельно для каждого не-#one */ div[id*=tab]:target ~ #three < /* На последок, для всех вкладок делаем третью страницу видимой */ display: none; >Реализовать подобное можно разными способами, но по-моему это самый логичный — без извращений в виде представления ссылок кнопками, списками, скриптами и прочей ересью, ссылка это ссылка, а блок это блок.
Табы (вкладки) для сайта на CSS и JavaScript – 3 способа
В этой статье рассмотрим примеры вкладок для сайта, выполненных как с использованием только CSS, так и с применением JavaScript.
Что такое вкладки (табы)?
Вкладки (табы) – это один из элементов пользовательского интерфейса, с помощью которого можно улучшить организацию контента на сайте. Осуществляют они это посредством разделения некоторого содержимого на части и показа нам в определённый момент времени только одной из них. Переход к другой части контента осуществляется посредством нажатия на соответствующий заголовок (название) вкладки.
Таким образом, табы позволяют нам очень экономично вывести много информации. Достигается это посредством того, что информация делится на значащие секции. А для показа одной секции требуется намного меньше места, чем для вывода всей информации сразу. В результате, если сделать всё точно, то пользователь будет интуитивно понимать, что и в какой вкладке находится. В конечном счёте это может сделать сайт более понятным и значительно упростить работу с ним.
Вкладки на CSS с использованием радиокнопок и :checked
Один из способов создать вкладки на CSS – это использовать радиокнопки( с type=»radio» ) и CSS-селектор :checked .
Без оформления минимальный код табов будет выглядеть следующим образом:
Содержимое 1. Содержимое 2. Содержимое 3. 
В этом варианте радиокнопки связаны с определённым . Связь элемента с организована через атрибут for . Это действие необходимо для того, чтобы после скрытия элементов , управлять ими (устанавливать checked ) можно было через клики по .
Отображение и скрытие контента, связанного с вкладками, выполняется очень просто. По умолчанию элементы, содержащие контент, не отображаются. Показ того или иного элемента с контентом осуществляется только в том случае, если селектор в следующем правиле позволяет выбрать его:
#tab-btn-1:checked~#content-1, #tab-btn-2:checked~#content-2, #tab-btn-3:checked~#content-3 { display: block; }Для выделения названия текущей (активной) вкладки можно использовать следующий код:
.tab > input[type="radio"]:checked + label { color: red; }
Здесь стилизация выбранного выполнена с использованием селектора .tab > input[type=»radio»]:checked + label . Он выбирает , который идёт сразу же после input[type=»radio»] , находящемся в состоянии checked .
Оформить вкладки можно по-разному. В следующем примере они визуально отображаются как кнопки:
.tab { display: flex; flex-wrap: wrap; } .tab > input[type="radio"] { display: none; } .tab-content { display: none; width: 100%; margin-top: 1rem; } #tab-btn-1:checked~#content-1, #tab-btn-2:checked~#content-2, #tab-btn-3:checked~#content-3 { display: block; } .tab > label { display: block; padding: 0.5rem 1rem; cursor: pointer; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out; text-decoration: none; color: #0d6efd; border: 0; border-radius: 0.375rem; background: 0 0; } .tab > input[type="radio"]:checked + label { cursor: default; color: #fff; background-color: #0d6efd; }
Вкладки с нижнем подчеркивание названий секций:
При необходимости вместо названий вкладок можно использовать хештеги:
Вкладки, которые имеют привычный вид (с использованием селектора :has() :
Вкладки на CSS с использованием :target
Ещё создать вкладки только на CSS можно с использованием псевдокласса :target.
Без оформления минимальный код будет выглядеть следующим образом:
Содержимое 1. Содержимое 2. Содержимое 3. Вкладка 1 Вкладка 2 Вкладка 3 
Работа этих табов основана:
- на добавлении хеша к URL-адресу страницы при нажатии на вкладку (ссылку);
- на скрытии всех блоков ( display: none ) и отображении только одного их них, id которого сейчас находится в хеше URL-адреса.
С помощью псевдокласса :target мы можем также выбрать другие элементы, которые каким-то определённым образом связаны с ним. Например, можем это использовать, чтобы выделить активную (текущую) вкладку:
#content-1:target~.tab-nav>[href="#content-1"], #content-2:target~.tab-nav>[href="#content-2"], #content-3:target~.tab-nav>[href="#content-3"] { color: red; }
В HTML-код табов уже добавлены классы. Используя их мы можем стилизовать табы так, как нам нужно.
Пример вёрстки вкладок на Flexbox, которые имеют стандартный вид:
Пример оформления вкладок, которые имеют внешний вид кнопок:
При необходимости, их, например, можно сделать вертикальными:
Если необходимо, чтобы табы на разных классах устройств отображались по-разному, можно использовать медиа-запросы. Пример табов, у которых название вкладок на маленьких экранах отображаются горизонтально, а на остальных вертикально:
@media (min-width: 576px) { .tab { flex-direction: row; } .tab-nav { flex-direction: column; margin-right: 1rem; } }Табы с использованием JavaScript
Сейчас рассмотрим реализацию табов на чистом JavaScript (без использования jQuery и каких-либо других библиотек). Этот вариант может потребоваться, когда мы хотим от табов больше, чем можно сделать с помощью CSS. Например, если мы хотим при открытии вкладки загружать туда контент через AJAX.
Код HTML и CSS без дополнительного оформления:
Содержимое 1. Содержимое 2. Содержимое 3. К вкладке, которая должна быть активной по умолчанию необходимо добавить класс tab-btn-active . А к контенту, связанному с ней tab-pane-show .
JavaScript
const showTab = (elTabBtn) => { const elTab = elTabBtn.closest('.tab'); if (elTabBtn.classList.contains('tab-btn-active')) { return; } const targetId = elTabBtn.dataset.targetId; const elTabPane = elTab.querySelector(`.tab-pane[data-id="${targetId}"]`); if (elTabPane) { const elTabBtnActive = elTab.querySelector('.tab-btn-active'); elTabBtnActive.classList.remove('tab-btn-active'); const elTabPaneShow = elTab.querySelector('.tab-pane-show'); elTabPaneShow.classList.remove('tab-pane-show'); elTabBtn.classList.add('tab-btn-active'); elTabPane.classList.add('tab-pane-show'); } } document.addEventListener('click', (e) => { if (e.target && !e.target.closest('.tab-btn')) { return; } const elTabBtn = e.target.closest('.tab-btn'); showTab(elTabBtn); });
Если нужно программно открыть другую вкладку, то можно использовать функцию showTab() . Ей в качестве аргумента нужно передать ту вкладку ( ), которую необходимо сделать активной:
JavaScript
// получим все кнопки const elTabBtns = document.querySelectorAll('#tab-1 .tab-btn'); // показать первую вкладку showTab(elTabBtns[0]); // показать вторую вкладку showTab(elTabBtns[1]); // показать третью вкладку showTab(elTabBtns[2]);Как работает JavaScript код табов?
Центральное место в коде JavaScript занимает функция showTab() . Она имеет параметр elTabBtn .
Сначала внутри функции мы получаем элемент .tab , который содержит elTabBtn . Если вкладка уже активна, то дальше ничего не делаем и завершаем функцию с помощью инструкции return . В противном случае получаем значение атрибута data-target-id с помощью следующего кода:
JavaScript
const targetId = elTabBtn.dataset.targetId;После этого, получаем элемент .tab-pane , используя targetId :
JavaScript
const elTabPane = elTab.querySelector(`.tab-pane[data-id="$"]`);Затем проверяем наличие элемента elTabPane , который мы получили в предыдущем шаге с помощью метода querySelector . Если элемент существует, то удаляем классы tab-btn-active и tab-pane-show у элементов, который в данный момент их содержат:
JavaScript
const elTabBtnActive = elTab.querySelector('.tab-btn-active'); elTabBtnActive.classList.remove('tab-btn-active'); const elTabPaneShow = elTab.querySelector('.tab-pane-show'); elTabPaneShow.classList.remove('tab-pane-show');В конце добавляем к элементам elTabBtn и elTabPane соответственно классы tab-btn-active и tab-pane-show :
JavaScript
lTabBtn.classList.add('tab-btn-active'); elTabPane.classList.add('tab-pane-show');Обработку события click выполняем с помощью следующего кода:
JavaScript
document.addEventListener('click', (e) => < if (e.target && !e.target.closest('.tab-btn')) < return; >const elTabBtn = e.target.closest('.tab-btn'); showTab(elTabBtn); >);Примеры
1. Пример, в котором данные о последней открытой вкладки таба будем сохранять в LocalStorage, а затем использовать эту информацию при открытии страницы для переключения на неё:
JavaScript
const showTab = (elTabBtn) => < // . if (elTabPane) < // . // сохраняем состояние вкладки в LocalStorage const tabStorage = JSON.parse(localStorage.getItem('tab') ?? '<>'); tabStorage[elTab.id] = targetId; localStorage.setItem('tabs', JSON.stringify(tabStorage)); > > // . // восстанавливаем состояние вкладок из LocalStorage const updateTabs = (tabStorage) => < Object.keys(tabStorage).forEach((tabId) =>< const elTab = document.querySelector(`#$`); const elTabBtn = elTab.querySelector(`.tab-btn[data-target-id="$"]`); showTab(elTabBtn); >); > const tabStorage = JSON.parse(localStorage.getItem('tabs') ?? '<>'); updateTabs(tabStorage);2. Пример синхронизации вкладок на разных открытых страницах, относящихся к одному источнику (через LocalStorage):
JavaScript
window.onstorage = (e) => < if (e.key === 'tabs') < const tabStorage = JSON.parse(e.newValue); updateTabs(tabStorage); >>3. Пример, в котором показано как на одной странице можно вывести несколько табов с сохранением их состояний (активных вкладок) в LocalSorage:
. . 4. Табы, содержащие видео с YouTube. При переходе на другую вкладку будет приостанавливаться воспроизведение текущего видео.
В элементах .player атрибут data-video-id определяет videoId ролика, а data-width и data-height — ширину и высоту iframe .
Загрузку API IFrame Player будем выполнять асинхронно. Для этого напишем следующий код:
JavaScript
const elScript = document.createElement('script'); elScript.src = 'https://www.youtube.com/iframe_api'; document.head.append(elScript);Создание и проигрывателя YouTube будем выполнять после загрузки кода API посредством функции onYouTubeIframeAPIReady :
JavaScript
const players = <>; function onYouTubeIframeAPIReady() < document.querySelectorAll('.player').forEach(el => < players[el.id] = new YT.Player(el.id, < height: el.dataset.height, width: el.dataset.width, videoId: el.dataset.videoId, playerVars: < origin: location.origin, >>); >) >Приостанавливает воспроизведение видео будем посредством метода pauseVideo , который будем выполнять при открытии вкладки (используя для этого событие tab.itc.show ):
JavaScript
document.addEventListener('tab.itc.show', (e) => < const elTabPanePrev = e.detail.elTabPanePrev; if (elTabPanePrev) < const player = elTabPanePrev.querySelector('.player'); player ? players[player.id].pauseVideo() : null; >>);Если статья понравилась, то поделитесь ей в социальных сетях:
Комментарии: 67
18.04.2023, 11:29
Добрый день! Помогите пожалуйста , не могу понять почему выдает ошибку ((
.tab_links::after < content: ''; width: 0; height: 5px; background-color: crimson; position: absolute; left:0; bottom: -8px; transition: 0.5s ease-in-out; >.tab_links.active-link::after < width: 100%; >.tab_contents ul li < list-style: none; margin: 10px 0; >.tab_contents ul li span < color: crimson; font-size: 18px; >.tab_contents < display: none; >.tab_contents.active_tab
JavaScript:
let tablinks = document.getElementsByClassName('tab_links'); let tabcontents = document.getElementsByClassName('tab_contents'); function opentab(tabname) < for (tablink of tablinks) < tablink.classList.remove('active-link'); >for (tabcontent of tabcontents) < tabcontent.classList.remove('active-tab'); >event.currentTarget.classList.add('active-link'); document.getElementById(tabname).classList.add('active-tab'); >Александр Мальцев
19.04.2023, 11:55
Привет! Поправил ошибки в JavaScript-коде:
let tablinks = document.getElementsByClassName('tab_links'); let tabcontents = document.getElementsByClassName('tab_contents'); function opentab(tabname) < for (let tablink of tablinks) < tablink.classList.remove('active-link'); >for (let tabcontent of tabcontents) < tabcontent.classList.remove('active_tab'); >event.currentTarget.classList.add('active-link'); document.getElementById(tabname).classList.add('active_tab'); >22.04.2022, 12:22
Отличная статья — всё, что я искал, в одном месте и компактно.
Вопросы:
1. Как осуществить вариант №1 (radio button), если input и label все вместе спрятаны внутрь отдельного блока?
Типа:
. 2. В варианте №2 (:target) при первичной загрузке страницы содержимое не отображается никакое)
Александр Мальцев
26.04.2022, 14:07
Спасибо!
1. Можно только с использованием :has(), как-то по-другому только на CSS не получится
2. С :target этот момент можно доделать, чтобы по умолчанию отображалась, например, 1 вкладка (пример)
23.03.2022, 23:36
Здравствуйте Александр, а как реализовать такую задачку, я сделал страницу с алфавитом и брендами на базе бутстрап табов, при выборе вкладки открывается то или иное содержание, пример тут https://laraves.ru/baseshop/brand/, а как сделать так чтоб была возможность сразу выбрать несколько вкладок, допустим A и B и S и соответственно открыть их содержание, и также чтоб поочердно при клике можно было снимать выделения? штатно есть только «ИЛИ», а хотелось бы «И»
15.03.2022, 10:53
Доброго дня, Александр.
Благодарю вас за подробную развернутую статью на данную тему и за максимально просто изложенный материал.
У меня вопрос следующего рода: как сделать «табы в табах»
Пример: на сайте по продаже пластиковых окон нужно вывести информацию в виде:
Табы (Уровень 1): типы конструкций, всего 4 типа конструкций;
В зависимости от типа выбранной конструкции подгрузить картинку (с этим разобрался) и блок с табами «виды комплектаций», их 7 штук
Табы (Уровень 2): виды комплектаций, всего 7 видов комплектаций.
Могли бы вы такой пример подробно рассмотреть, буду вам очень признателен.
Александр Мальцев
19.03.2022, 14:46
Привет! Благодарю за отзыв.
Сделал пример, если конечно правильно понял и сделал то что нужно (правда пришлось немного JavaScript код табов изменить): перейти.
21.03.2022, 12:23
Александр, благодарю за огромную работу и помощь! Вы мне очень помогли! Это именно то, что нужно, хочу спросить следующее как вкладкам 1.1. 1.4 присвоить другой класс в CSS, чтобы потом навесить на них другие свойства CSS, тем самым, чтобы они визуально выглядели по другому?
19.10.2021, 03:49
Я пытаюсь добавить два слайдера через шорткод в разные табы. После перезагрузки один работает (группа из 5 картинок, опционально вывожу только 3 с возможностью их прокручивать), а при переходе в следующий таб второй — нет (отображается только одна картинка из группы в увеличенном виде и не реагирует прокрутка). Причём, как только меняется разрешение экрана (через responsive в инспекторе) оба слайдера начинают работать прекрасно (если быть точнее, то тот, который во втором табе), но при очередной перезагрузке опять один работает, второй — нет. В чём может быть причина?
Александр Мальцев
20.10.2021, 13:18
Тут нужно разбираться со слайдерами, и скорее всего слайдер, который расположен во вкладке, содержимое которого сейчас не показывается, нужно активировать в момент перехода на неё.
10.09.2021, 23:12
Здравствуйте, допустим на сайте есть блок с карточками товаров. Как при нажатии на таб показывать не одну карточку, а несколько? пока только смог реализовать через дублировании html-кода, но это наверное такой себе вариант…
07.08.2021, 12:33
Добрый день, Александр
Подскажите, столкнулся с такой проблемой.
Взял пример реализации через JS.
Если кликаю на свободное место вкладки, то работает, если кликаю к примеру по тексту вкладки, то нет.
Как реализовать, чтобы по клику на любой элемент внутри родителя сработало переключение?
Александр Мальцев
08.08.2021, 10:05
Привет! Код JavaScript поправил в примере: tabs-v1
08.08.2021, 12:25
Большое спасибо!
12.07.2021, 13:00
Есть баг с табами, если рядом с названием вкладки будет картинка, про нажатие на нее таб не открывается, только если нажать на текст
Александр Мальцев
08.08.2021, 10:10
Поправил код JavaScript в примере: tabs-v1
Alex Maker
31.05.2021, 13:18
Здравствуйте, скажите что из выше перечисленного может помочь в решении моей проблемы?
Есть табы с категориями, в каждой из категорий есть табы с товаром, переключение между категориями и товарами написано на чистом Javascript, а теперь проблема. Необходимо чтобы по ссылке с другой страницы открывалась необходимая категория и товар. Дайте пример пожалуйста, я не силен в js((
Александр Мальцев
08.08.2021, 10:36
Привет! Для этого можно, например, передавать в составе URL номер вкладки, которую нужно открыть:
Эта ссылка (https://itchief.ru/examples/lab.php?topic=javascript&file=tabs-08&tab=2) откроет вторую вкладку, а эта (https://itchief.ru/examples/lab.php?topic=javascript&file=tabs-08&tab=3) — третью.
Сам код тут будет простой, нужно получить значение GET-параметра tab и передать его значение функции которая переключает вкладки:
const tabs = $tabs('.tabs'); const urlParams = new URLSearchParams(location.search); const tabTo = urlParams.get('tab'); if (tabTo) { tabs.switchTabTo(tabTo); }
19.05.2021, 09:42
Доброго времени суток друзья.
Очень интересные и полезные примеры работы скриптов, но к сожалению для решения свой задачи ничего подходящего не нашёл.
Возможно похожее есть решение с синхронизацией табов на разных страница как на примере itchief.ru/examples/lab.php?topic=javascript&file=tabs-v3, но немного не то что надо.
Александр, может Вы как мастер сможете помочь с реализацией моей задачи.
У меня на сайте есть 2 отдельный блока div.
В одном блоке содержится информация от квадроциклах, те. Есть цена и характеристики, а во втором блоке есть табы, в которых есть информация о предоставляемых услугах, в каждом табе разная услуга.
Зада состоит в том, чтобы при клике на каждом табе справа менялась цена.
Например:
Клик по табу №1 справа менялась цена в левом блоке и так при нажатии на каждый таб. пример на картинке
Буду очень признателен за помощь.
Александр Мальцев
08.08.2021, 11:11
Привет! Можно добавить к вкладкам data-атрибут с ценой:
Вкладка 1 Вкладка 2 Вкладка 3
const tabs = $tabs('.tabs'); function updatePrice(tabsLink) { const price = tabsLink.dataset.price; document.querySelector('.price').textContent = price; } updatePrice(document.querySelector('.tabs__link_active')); document.addEventListener('tab.show', function(e) { updatePrice(e.detail.querySelector('.tabs__link_active')); });
14.04.2021, 15:26
То что надо. Спасибо автору большое!
Ребят. Использую Табы с использованием JavaScript. Главный код сначала в посте. Без дополнений.
У меня важный вопрос:
У меня табы с плеерами (iframe).
Так вот, как остановить подзагрузку и воспроизведение видео, при переходе на другую вкладку.
А то открываю другую, а на первой идет все и не останавливается. И соответственно грузятся сразу все вкладки.
Если бы разрешить загружать основную только, а остальные при переключении, останавливая первую…
Заранее благодарю, если есть решение!
Александр Мальцев
20.04.2021, 09:23
Пожалуйста!
Добавил в статью пример табов, содержащие YouTube видео. При переключении видео приостанавливается.
Открыть пример
30.04.2021, 20:05
Просто красавчик!
Спасибо огромное.
Александр Сидоров
01.04.2021, 14:58
Добрый день Александр!
Вопрос такой: не подскажите как можно задействовать табы в вопросе, когда необходимо сделать подобный блок:
— листающийся слайдер с категориями товара;
— ниже блок с первым товаром из выбранной категории товаров и в этом блоке без перезагрузки страницы можно выбрать другой товар (торговое предложение по типу SKU битрикс), с другой ценой и например расцветкой, но относящийся к основному товару.
Меняются фото, цена и описание.
То есть в данном случае нужно категории сделать с переключением и без перезагрузки страницы, внутри категории нужно отобразить первый товар (а в нем своего рода торговые предложения, ну либо же другие товары данной категории, просто в виде иконок цветов), при переключении выбора цвета, меняется содержимое блока и тоже без перезагрузки.
Как копать в сторону аякса — это тоже на данный момент по знаниям проблематично…
19.03.2021, 17:10
Здравствуйте! Подскажите как сделать несколько блоков с табами на одной странице их мне нужно 4 (https://itchief.ru/assets/uploadify/9/8/8/9889f32d8a70fb4e1dc8bd505ace4887.jpg). Пробую вариант с отображением как кнопки. У меня только две вкладки, в каждом блоке разное содержание, название вкладок одинаковое.
Александр Мальцев
20.03.2021, 15:14
Привет! Связывание вкладок с содержимым выполняется через id, название может быть любым. Тут всё просто, проблем не должно быть. Как сделать: пример.
21.03.2021, 07:49
Просто огромное спасибо, все работает как надо.
15.12.2020, 06:12
Здравствуйте.
Подскажите, пожалуйста, как реализовать возможность переключения сразу нескольких табов кнопкой?
Для примера: у меня 5 блоков, в каждом по 2 вкладке. Над ними 2 кнопки, которые должны переключить сразу все табы.
Александр Мальцев
17.12.2020, 13:24
Привет!
Можно например так (открыть пример):
1 2
05.12.2020, 18:02
А как сделать кнопку «Добавить новую вкладку»? К примеру, чтобы скопировало содержание вкладки с чистым независимым input от копируемой вкладки
Александр Мальцев
06.12.2020, 16:15
Лучше наверно не копировать, а самостоятельно определять контент, например, с помощью функции getTabsPaneContent.
Для этого необходимо (открыть пример):
1. Добавить кнопку:
2. Создать функцию getTabsPaneContent, которая должна будет возвращать то, что мы хотим увидеть в новой вкладке:
const getTabsPaneContent = (counter) => { return `Содержимое ${counter}. `; }
3. Получить в JavaScript саму кнопку и привязать к ней обработчик события click, который будет добавлять новую вкладку с контентом, определяемым функцией getTabsPaneContent:
const $addNewTab = document.querySelector('#add-new-tab'); $addNewTab.onclick = function () { const $tabsNav = document.querySelector('.tabs__nav'); const counter = $tabsNav.children.length + 1; // вставляем новый tabs__link const $tabsLink = `Вкладка ${counter}` $tabsNav.insertAdjacentHTML('beforeend', $tabsLink); // вставляем новый tabs__content const $tabsContent = document.querySelector('.tabs__content'); $tabsContent.insertAdjacentHTML('beforeend', getTabsPaneContent(counter)); }
05.10.2020, 18:31
Супер! как всегда просто и понятно! Спасибо!
Александр Мальцев
08.10.2020, 13:19
Пожалуйста!
26.08.2020, 18:09
еще есть вопросик, при нажатии на вкладку страница прокручивается к началу вкладку сверху alutat.com.ua/ а как отменить это?
Александр Мальцев
02.09.2020, 14:19
Так вы это реализовали в виде отдельных страниц, а не на одной странице. А новая страница по умолчанию всегда открывается сначала. Чтобы это реализовать, вам нужно дополнительно добавить скрипт на страницу, который будет её прокручивать до этого состояния.
19.08.2020, 18:09
Сперва, спасибо за полезную статью )
Хочу использовать вот эти вертикальные табы itchief.ru/examples/lab.php?topic=css&file=tabs-v4 на сайте, но не могу решить вопрос с отображением сразу контента первой вкладки. Знаю, что можно страницу itchief.ru/examples/output.php#content-1 открывать, но они у меня на главной будут сразу и нужно чтобы сразу была активна первая вкладка.
Как такое можно реализовать?
Буду признателен за ответ.
Александр Мальцев
20.08.2020, 04:01
Здравствуйте! На сколько понимаю вы хотите без JavaScript. На CSS это можно выполнить, если только разместить содержимое вкладки, которая по умолчанию должна быть открытой, после остальных.
А также внести необходимые изменения в CSS. Готовый пример можно посмотреть здесь.
20.08.2020, 08:18
супер! спасибо большое!
11.04.2020, 20:36
Доброго времени Александр! Подскажите как в данном скрипте добавить localStorage или cookie или sessionStorage, чтобы при F5 остаться на той же самой вкладке?
Александр Мальцев
12.04.2020, 08:32
Привет! Пример как это сделать с помощью localStorage добавил в статью.
12.04.2020, 13:09
12.04.2020, 20:47
А для двух табов подряд на странице не работает почему-то, код инициализации сразу всех вкладок делает нерабочим скрипт. Только если убрать один из двух табов, тогда да, сохранение в LocalStorage отрабатывает великолепно!
13.04.2020, 13:28
Разобрался, все работает!
Александр Мальцев
13.04.2020, 14:16
13.04.2020, 14:30
Правда как-то очень интересно работает))) Пока еще не понял, но вроде «через раз»
Александр Мальцев
13.04.2020, 14:41
Может что-то не учёл. Пример как это можно сделать для нескольких вкладок в статью добавил.
13.04.2020, 14:44
Сейчас проанализирую, сравню
14.04.2020, 02:25
Нашел одну причину, почему скрипт «ломало», банальная невнимательность, лишний раз обернул в дивы tabs, то, что вообще не надо было оборачивать.
Остальные примеры в статье разобрал, проверил на своем сайте, все работает как положено, кроме одного загадочного для меня явления))) Одни табы с одним контентом у меня на одной странице, другие с другим контентом на совершенно другой странице. Футер где скрипт, на всем сайте один и тот же. Табы работают, но допустим в хроме на одной странице с табами вкладка остаётся после F5 которую открыл, на другой local storage не срабатывает. В мозилле наоборот, та которая не работала в хроме, работает. «Мудрый» код скрипта покажу завтра
14.04.2020, 02:50
Код скрипта такой:
Александр Мальцев
14.04.2020, 16:36
Так корректно работать не будет. В mytabs будет находится результат вызова функции $tabs('.tabs') для первого таба. Кроме этого в этом случае в LocalStorage нужно сохранять не просто href ссылку, а, например, их в виде некоторого объекта, как в этом примере.
Как этот пример работает? В этом примере к табам добавляется id:
Далее выполняем их инициализацию следующим образом
var mytabs = { 'tabs-1': $tabs('#tabs-1'), 'tabs-2': $tabs('#tabs-2') }, .
Теперь у нас в mytabs['tabs-1'] и mytabs['tabs-2'] находятся результаты соответственно вызова $tabs для первого и второго tabs.
Сохранение данных в LocalStorage в этом примере выполняется в таком формате:
{"tabs-2":"#content-6","tabs-1":"#content-2"}
Вам нужно написать что-то подобное.
14.04.2020, 17:13
Наверно я что-то не недопонимаю, когда мы вызываем функцию $tabs('.tabs') и происходит инициализация определенного id с помощью:
var mytabs = { 'tabs-1': $tabs('#tabs-1'), 'tabs-2': $tabs('#tabs-2') }
такая конструкция отлично работает, если табы на одной и той же странице. но если они расположены на разных страницах, то не работает, пробовал по разному ничего пока не получается.
Александр Мальцев
15.04.2020, 04:07
В этом случае его можно сделать более динамичным (пример обновил в статье). Теперь он будет сохранять состояния в LocalStorage и восстанавливать открытые вкладки только для тех табов, которые имеют id.