Что такое табы? Табы (вкладки) для сайта на CSS и JavaScript
Табы на своем сайте можно сделать на «чистом» CSS и на JavaScript. Каждый может выбрать себе наиболее подходящий способ.
Табы — это вкладки. Они удобны тем, что позволяют очень компактно уместить много информации на веб-странице. По сути, вы размещаете табы (несколько вкладок) с названиями информации, которая под ними содержится. Пользователь нажимает на нужный таб и ему открывается соответствующая информация. То есть каждая отдельная вкладка — это отдельный блок информации, который открывается при ее активации.
С технической стороны, табы представляют собой ссылки и другие HTML-компоненты, которые скрыты от пользователя до момента их активации. Оформить табы можно как угодно: ограничение — полет вашей фантазии и навыков работы с CSS.
Табы CSS
Табы при помощи «чистого» CSS можно реализовать несколькими способами. Наиболее популярный способ — это реализация с использованием радиокнопок.
Допустим мы имеем вот такой HTML-код:
Информация, содержащаяся в первом табе.
Информация, содержащаяся во втором табе.
Информация, содержащаяся в третьем табе.
Код CSS тогда будет таким:
.mytabs
font-size: 0;
>
.mytabs>input[type=»radio»]
display: none;
>
.mytabs>div
/* изначально скрываем контент от пользователей */
display: none;
border: 2px solid #e5e5e5;
padding: 12px 20px;
font-size: 18px;
>
/* делаем видимым контент, который выбран пользователем в качестве активированной радиокнопки */
#mytab-button-1:checked~#mycontent-1,
#mytab-bbutton-2:checked~#mycontent-2,
#mytab-button-3:checked~#mycontent-3
display: block;
>
.mytabs>label
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: #f4f4f4;
border: 2px solid #e5e5e5;
padding: 4px 10px;
font-size: 18px;
line-height: 1.7;
transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
cursor: pointer;
position: relative;
top: 2px;
>
.mytabs>label:not(:first-of-type)
border-left: none;
>
.mytabs>input[type=»radio»]:checked+label
background-color: #eee;
border-bottom: 1px solid #eee;
>
Нужн понимать, что это всего лишь одна вариация исполнения. Даже ее можно модифицировать под свой вкус и выполнить отоброжение самих кнопок табов на любой вкус. Суть этого метода, что он завязан на исполнении радиокнопок при помощи CSS.
Табы CSS: псевдокласс «:target»
Табы, организованные при помощи CSS таким способом, визуально практически ничем не буд у т отличаться от первого способа. Вся разница — это техническая организация.
Допустим, мы имеем вот такой HTML-код:
Информация, содержащаяся в первой вкладке.
Информация, содержащаяся во второй вкладке.
Информация, содержащаяся в третьей вкладке.
Название первого таба
Название второго таба
Название третьего таба
Код CSS будет таким:
.mytabs
display: flex;
flex-direction: column;
>
.mytabs__links
display: flex;
width: 950%;
overflow-x: auto;
overflow-y: hidden;
margin-left: auto;
margin-right: auto;
margin-bottom: 12px;
order: 0;
white-space: nowrap;
background-color: #eee;
border: 2px solid #e3f5fd;
box-shadow: 0 3px 5px 0 #e3f5fd;
>
.mytabs__links>a
display: inline-block;
text-decoration: none;
padding: 8px 12px;
text-align: center;
color: #d5d5d5;
>
.mytabs__links>a:hover
background-color: rgba(225, 241, 252, 0.4);
>
.mytabs>#mycontent-1:target~.mytabs__links>a[href=»#mycontent-1″],
.mytabs>#mycontent-2:target~.mytabs__links>a[href=»#mycontent-2″],
.mytabs>#mycontent-3:target~.mytabs__links>a[href=»#mycontent-3″]
background-color: #bddefb;
cursor: default;
>
.mytabs>div:not(.mytabs__links)
display: none;
order: 1;
>
.mytabs>div:target
display: block;
>
Мы надеемся, что механизм работы такого способа организации табов вам понятен. Тут тоже визуально вы можете его оформлять как хотите. Если нужно, можете даже расположить табы вертикально.
Табы на чистом CSS делаются достаточно просто, если понимать, по какому принципу они выстраиваются. Но давайте по см отрим, как исполнить табы, используя возможности JavaScript.
Табы на JavaScript
Многие веб-разрабтчики утверждают, что для таких задач, как табы, лучше использовать CSS, так как таблицы стилей меньше нагружают веб-страницу, а JavaScript лучше использовать для более серьезных задач. Использовать или не использовать JavaScript для табов — это на ваше усмотрение, однако понимать, как их можно организовать было бы неплохо.
Допустим мы имеем вот такой HTML-код:
Информация, содержащаяся в первом табе.
Информация, содержащаяся во втором табе.
Информация, содержащаяся в третьем табе.
По логике, после написания HTML-кода должен присутствовать CSS. В данном примере мы не будем его описывать, потому что в нем должно содержаться только визуальное оформление ваших вкладок. Оформить их визуально вы можете самостоятельно. Но давайте посмотрим, каким будет JavaScript-код:
class ItcTabs
constructor(target, config)
const defaultConfig = <>;
this._config = Object.assign(defaultConfig, config);
this._elTabs = typeof target === ‘string’ ? document.querySelector(target) : target;
this._elButtons = this._elTabs.querySelectorAll(‘.mytabs__button’);
this._elPanes = this._elTabs.querySelectorAll(‘.mytabs__pane’);
this._eventShow = new Event(‘mytab.itc.change’);
this._init();
this._events();
>
_init()
this._elTabs.setAttribute(‘role’, ‘tablist’);
this._elButtons.forEach((el, index) =>
el.dataset.index = index;
el.setAttribute(‘role’, ‘mytab’);
this._elPanes[index].setAttribute(‘role’, ‘tabpanel’);
>);
>
show(elLinkTarget)
const elPaneTarget = this._elPanes[elLinkTarget.dataset.index];
const elLinkActive = this._elTabs.querySelector(‘.mytabs__btn_active’);
const elPaneShow = this._elTabs.querySelector(‘.mytabs__pane_show’);
if (elLinkTarget === elLinkActive)
return;
>
elLinkActive ? elLinkActive.classList.remove(‘mytabs__button_active’) : null;
elPaneShow ? elPaneShow.classList.remove(‘mytabs__pane_show’) : null;
elLinkTarget.classList.add(‘mytabs__button_active’);
elPaneTarget.classList.add(‘mytabs__pane_show’);
this._elTabs.dispatchEvent(this._eventShow);
elLinkTarget.focus();
>
showByIndex(index)
const elLinkTarget = this._elButtons[index];
elLinkTarget ? this.show(elLinkTarget) : null;
>;
_events()
this._elTabs.addEventListener(‘click’, (e) =>
const target = e.target.closest(‘.mytabs__button’);
if (target)
e.preventDefault();
this.show(target);
>
>);
Заключение
Сегодня мы рассмотрели, как можно организовать табы на чистом CSS и при помощи JavaScript. Как видно из статьи, табы на CSS организовать проще и код выглядит немного компактнее, а работать будут безупречно.
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
Как сделать адаптивные табы (вкладки) на css без использования скриптов
Добрый вечер! Сегодня я вам расскажу, каким образом можно сделать табы (вкладки) на чистом css3 без какого-либо использования jquery или других скриптов. Как вы уже знаете, чем меньше вы будете использовать скриптов, тем лучше для вашего сайта, и тем быстрее он будет работать. А скорость сайта сегодня один из самых важных показателей его ранжирования в поисковых системах.
Адаптивные вкладки (табы) на чистом css и без скриптов
Сегодня табы есть практически на любом сайте. Они необходимы для того, чтобы отображать несколько областей контента без перехода пользователя на другие страницы. Например, на одном из моих проектов по разработке интернет-магазина на Joomla было добавление двух табов, которые будут отображать по 3 товара двух типов: “хиты продаж” и “последние”. Принято решение делать их на чистом css без перезагрузки сайта ненужными скриптами.
HTML код для табов с использованием css3 по пунктам
1. В первую очередь нам необходимо создать div с классом “tabs”.
2. Добавляем непосредственно кнопки-переключали с именем “tabs”, при нажатии на которые они будут включать содержимое наших табов.
3. Добавляем их название через label
4. Под кнопками, которые мы с Вами сделали в пунктах 1-3, мы добавляем уже непосредственно контент, который нам нужно выводить. В моем случае это три последних товара и три лучших товара.
Каждый блок у нас имеет класс tab-content и идентификаторы tab-content-1 и tab-content-2.
Итоговый HTML наших будущих табов
Хиты продаж
Последнее
На этом мы закончили с написанием нашего html. Согласитесь, ничего сложного тут не было. Итак, идем дальше.
CSS стили для табов с использованием css3 по пунктам
Теперь самое интересное и сложное. Нам нужно наши табы сделать табами, которые будут переключаться при клике ��
Так как у нас будет два таба, то нам нужно назначить им такую ширину, чтобы они помещались на экране и не вылазили за его черту. Для этого мы прописываем ширину 50%. Если у вас будет другое число табов, то и ширину рассчитывайте отталкиваясь от их числа.
Также, обратите внимание, что по умолчанию, мы делаем наши кнопки-переключатели невидимыми
.tabs < max-width: 90%; float: none; list-style: none; padding: 0; margin: 75px auto; border-bottom: 4px solid #ccc; >.tabs:after < content: ''; display: table; clear: both; >.tabs input[type=radio] < display:none; >.tabs label p < padding: 5px; margin-right: 0; >.tabs label < display: block; float: left; width: 50%; color: #ccc; font-size: 30px; font-weight: normal; text-decoration: none; text-align: center; line-height: 2; cursor: pointer; box-shadow: inset 0 4px #ccc; border-bottom: 4px solid #ccc; -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */ transition: all 0.5s; >.tabs label span < display: none; >.tabs label:hover < color: #3498db; box-shadow: inset 0 4px #3498db; border-bottom: 4px solid #3498db; >.tab-content
Как заставить это работать
А тут все просто.
Добавляем следующий css код
.tabs [id^=»tab»]:checked + label < background: #FFF; box-shadow: inset 0 4px #3498db; border-bottom: 4px solid #3498db; color: #3498db; >#tab-first:checked ~ #tab-content-1, #tab-second:checked ~ #tab-content-2
Строками выше мы добавляем особы стиль для активного таба используя :checked + label
Далее мы уже проверяем, какой наш переключатель имеет статус checked и отображаем содержимое, которое у нас прикреплено за ним, используя его id.
#tab-first:checked ~ #tab-content-1 – данная строка говорит о том, что нам нужно отобразить контент, который имеет id=”tab-content-1″, если tab-first имеет статус checked.
Делаем наши табы адаптивными
@media (min-width: 768px) < .tabs p < padding: 5px; margin-right: 10px; >.tabs < max-width: 750px; margin: 50px auto; >>
Ну вот по сути и все. Наши табы готовы :). Вы их можете менять как угодно, добавлять-удалять. Спасибо за внимание ��
автор: Роман Довгаль
С 2010 года я занимаюсь интернет маркетингом. Сюда входит и SEO, и SMM, и SMO, и, собственно маркетинговое продвижение не только сайтов, а проектов в комплексе 🙂
Для меня каждый проект – это отдельная жизнь. Своя целевая аудитория, свои методы продвижения, свои показатели результативности 🙂
Табы (вкладки) для сайта на 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.
Как создать сайт с использованием табов для переключения контента
В данной статье мы рассмотрим, как создать сайт с использованием табов для переключения контента. Табы — это удобный способ организации информации на веб-странице, позволяющий разделить контент на несколько секций и отображать их по очереди при нажатии на соответствующие вкладки.
HTML-структура
Для создания табов нам потребуется следующая HTML-структура:
Здесь мы создали контейнер с классом tabs , содержащий список вкладок tab-list и контейнер с контентом tab-content . Каждая вкладка имеет атрибут data-tab , соответствующий идентификатору соответствующего контента.
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
CSS-стили
Теперь добавим немного стилей для наших табов:
.tabs < width: 100%; display: inline-block; >.tab-list < padding: 0; margin: 0; list-style: none; >.tab-item < display: inline-block; margin-right: 10px; padding: 10px; cursor: pointer; background-color: #f1f1f1; border-radius: 5px 5px 0 0; >.tab-item.active < background-color: #fff; >.tab-content < border: 1px solid #f1f1f1; padding: 20px; border-radius: 5px; >.tab-pane < display: none; >.tab-pane.active
Эти стили задают базовую стилизацию для нашей структуры табов, делая их более приятными для глаза ��.
JavaScript-логика
Наконец, добавим небольшой скрипт, который будет отвечать за переключение контента при нажатии на вкладки:
document.addEventListener('DOMContentLoaded', function() < var tabItems = document.querySelectorAll('.tab-item'); tabItems.forEach(function(tab) < tab.addEventListener('click', function() < var tabId = this.getAttribute('data-tab'); var content = document.getElementById(tabId); // Удаляем активный класс у текущих вкладок и контента document.querySelector('.tab-item.active').classList.remove('active'); document.querySelector('.tab-pane.active').classList.remove('active'); // Добавляем активный класс для выбранной вкладки и контента this.classList.add('active'); content.classList.add('active'); >); >); >);
Этот скрипт добавляет обработчик событий для каждой вкладки, который при нажатии удаляет активный класс у текущих вкладок и контента, а затем добавляет его для выбранной вкладки и соответствующего контента.
Теперь у вас есть функциональный сайт с использованием табов для переключения контента! ��
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Не забывайте продолжать изучать веб-разработку и практиковаться в создании различных элементов. Успехов вам в обучении!