Главная Инструкция Магазин
Введение Страницы Редактор

Инструменты разработчика

уровень продвинутый

HTML

Ссылка <a> Кнопка <button>

CSS

Цвет Тень

Бэкенд

Введение Локальный компьютер Сервер

Вкладки

Новый HTML-тег <cb-tabs> в роли списка вкладок (tablist).
<cb-tabs> <div class="cb-tab" role="tab">Опция 1</div> <div class="cb-tab" role="tab">Опция 2</div> <div class="cb-tab" role="tab">Опция 3</div> <div class="cb-tab" role="tab">Опция 4</div> </cb-tabs>
<cb-tabs-nav> <cb-tabs> <div class="cb-tab" role="tab">Опция 1</div> <div class="cb-tab" role="tab">Опция 2</div> <div class="cb-tab" role="tab">Опция 3</div> <div class="cb-tab" role="tab">Опция 4</div> <div class="cb-tab" role="tab">Опция 5</div> <div class="cb-tab" role="tab">Опция 6</div> <div class="cb-tab" role="tab">Опция 7</div> <div class="cb-tab" role="tab">Опция 8</div> </cb-tabs> </cb-tabs-nav>

Атрибуты

role="tab"
Вкладка (tab).
aria-selected="true"
Выбранная вкладка (tab). По умолчанию выбрана первая.

JavaScript

const tabs = document.querySelector('cb-tabs')
tabs.selectedIndex = 3
Выбрать вкладку с индексом 3.

События

change
Событие переключения вкладок.
tabs.addEventListener('change', callback)

Панели вкладок

Элементы, где отображается контент при выборе соответствующей опции.
<cb-tabs-nav> <cb-tabs tabpanels> <div class="cb-tab" role="tab" id="tab1">Опция 1</div> <div class="cb-tab" role="tab" id="tab2">Опция 2</div> <div class="cb-tab" role="tab" id="tab3">Опция 3</div> <div class="cb-tab" role="tab" id="tab4">Опция 4</div> <div class="cb-tab" role="tab" id="tab5">Опция 5</div> <div class="cb-tab" role="tab" id="tab6">Опция 6</div> <div class="cb-tab" role="tab" id="tab7">Опция 7</div> </cb-tabs> <div role="tabpanel" aria-labelledby="tab1">Контент 1</div> <div role="tabpanel" aria-labelledby="tab2" hidden>Контент 2</div> <div role="tabpanel" aria-labelledby="tab3" hidden>Контент 3</div> <div role="tabpanel" aria-labelledby="tab4" hidden>Контент 4</div> <div role="tabpanel" aria-labelledby="tab5" hidden>Контент 5</div> <div role="tabpanel" aria-labelledby="tab6" hidden>Контент 6</div> <div role="tabpanel" aria-labelledby="tab7" hidden>Контент 7</div> </cb-tabs-nav>
Контент 1