
#13 - Создание вкладок, табов (tabs.js)
Bootstrap предлагает готовые скрипты для создания вкладок при помощи плагина tabs.js. За урок мы установим плагин, изучим работу с ним, а также создадим несколько примеров вкладок и табов на основе данной библиотеки.
Видеоурок
Вы можете точечно настроить ваш Bootstrap файл, указав все необходимые плагины и расширения через специальный редактор на их официальном сайте. Ссылка на редактор находится
Исходный код
Вкладки или же табы
<br>
<div class="container">
<ul class="nav nav-pills" role="tablist">
<li><a href="#home" role="tab" data-toggle="pill">Домой</a></li>
<li><a href="#profile" role="tab" data-toggle="pill">Профиль</a></li>
<li class="active"><a href="#message" role="tab" data-toggle="pill">Сообщения</a></li>
<li><a href="#settings" role="tab" data-toggle="pill">Настройки</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade" id="home">Вкладка домой</div>
<div role="tabpanel" class="tab-pane fade" id="profile">Вкладка профайл</div>
<div role="tabpanel" class="tab-pane active fade in" id="message">Вкладка с сообщениями</div>
<div role="tabpanel" class="tab-pane fade" id="settings">Вкладка с настройками</div>
</div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$('a[data-toggle="pill"]').on('hidden.bs.tab', function (e) {
console.log(e.target); // вкладка, которая стала активной
console.log(e.relatedTarget); // предыдущая активная вкладка
})
</script>
Онлайн редактор кода
Загрузка...
Задание к уроку
Переключение между вкладками
Создайте переключение между вкладки как на фото ниже:
Посмотреть ответ
Решение задания:
<div class="container m-3">
<div class="btn-group btn-group-xs">
<a href="#tab_1" data-toggle="tab_1" class="btn btn-success">Вкладка №1</a>
<a href="#tab_2" data-toggle="tab" class="btn btn-primary">Вкладка №2</a>
<a href="#tab_3" data-toggle="tab" class="btn btn-outline-info">Вкладка №3</a>
<a href="#tab_4" data-toggle="tab" class="btn btn-danger">Вкладка №4</a>
<a href="#tab_5" data-toggle="tab" class="btn btn-warning">Вкладка №5</a>
</div>
<!-- Класс mt-4 (margin-top) добавляет отступ сверху -->
<div class="tab-content mt-4">
<div role="tabpanel" class="tab-pane active" id="tab_1">
<button type="button" class="btn btn-success">Первая вкладка</button>
</div>
<div role="tabpanel" class="tab-pane" id="tab_2">Вкладка под номером 2</div>
<div role="tabpanel" class="tab-pane" id="tab_3">Вкладка под номером 3</div>
<div role="tabpanel" class="tab-pane" id="tab_4">Вкладка под номером 4</div>
<div role="tabpanel" class="tab-pane" id="tab_5">Вкладка под номером 5</div>
</div>
</div>
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
Также стоит посмотреть
Комментарии