Динамически переключаемые вкладки являются очень удобным элементом навигации, хорошей альтернативой карусели в некоторых случаях. Они позволяют разместить большое количество контента в пределах одной секции, сгруппировав его по тематике или другим параметрам.
Вкладки можно использовать не только для вывода разбитого по категориям информационного контента, но, например, для изменения ключевых параметров калькулятора, тематической организации галерей.
Необходимые библиотеки
Для организации работы динамических вкладок на Bootstrap потребуется подключение трех библиотек:
- CSS- непосредственно стили Bootstrap (bootstrap.min.css),
- JS – библиотека jQuery,
- JS – библиотека JS Bootstrap (bootstrap.min.js или bootstrap.bundle.js) .
Минимальная разметка
Со всеми вариантами разметки можно подробно ознакомиться в документации к Bootstrap. В данном примере для организации вкладок будем использовать список.
Итак, необходимая для работы разметка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="container"> <!-- секция меню --> <ul class="nav nav-tabs"> <li class="nav-item"> <a class='nav-link active' data-toggle="tab" href="#cat1">категория 1</a> </li> <li class="nav-item"> <a class='nav-link' data-toggle="tab" href="#cat2">категория 2</a> </li> </ul> <!-- секция вкладок --> <div class="tab-content"> <!-- контент первой категории --> <div id="cat1" class="tab-pane fade show active"> Контент первой категории </div> <!-- контент второй категории --> <div id="cat2" class="tab-pane fade"> Контент второй категории </div> </div> </div> |
Вся разметка размещена в родительском контейнере с классом .container. Разметка для динамических вкладок состоит из двух секции: навигации и контента.
Для организации панели навигации в нашем случае использован неупорядоченный список с классом .nav-tabs. Для работы вкладок, помимо классов, необходимо указать параметр data-toggle=”tab”. Ссылка должна указывать на id заданной секции контента. При наличии активного по умолчанию элемента меню, не забудьте добавить ему класс .active.
Секция контента располагается в блоке с классом .tab-content. Контент каждой секции заключается в блок с классом .tab-pane. Для секции с активным элементом меню указываем класс .show и .active. Содержимое и разметка контента может быть каким угодно. Для анимации при переключении необходимо добавить класс .fade.
Результат должен быть таким:
Особенности
При размещении в меню элементов с выпадающим списком необходимо подключить библиотеку popper.js или полную сборку Bootsrap bootstrap.bundle.js.
Стоит отметить, что использование во вкладках элементов с выпадающим списком не приветствуется, поскольку элементы списка не видны, что делает выбор категории не очевидным и затрудняет использование меню.
Пример #1
See the Pen
WOV_BS_tabs by Paul (@1110000)
on CodePen.
