Как внутри таба сделать еще 2 таба

Вкладки

Вкладки как элемент интерфейса пришли из делопроизводства. В обычные деловые папки вставляют небольшие кусочки картона с надписями, которые позволяют быстро сориентироваться в содержании и перейти к нужному разделу. На сайтах вкладки применяются там, где требуется компактно и наглядно скомпоновать информацию по блокам. Переход по вкладкам происходит без перезагрузки страницы, что ускоряет работу и упрощает пользователю жизнь.

Код вкладок состоит из двух частей — это отображение самих вкладок, а также информации с ними связанных.

Даже с этим куцым кодом вкладки должны уже работать и визуально переключаться.

Переходим к выводимому тексту. Оборачиваем всё элементом с классом tab-content , внутри для каждой вкладки делаем отдельный с классом tab-pane . Плюс добавляем уникальный идентификатор, связывающий текст с самой вкладкой. Последний штрих — для текущей вкладки указываем класс active .

Соединяем вместе два фрагмента и получаем итоговый код для создания вкладок.

Пример 1. Создание вкладок

Результат данного примера показан на рис. 1.

Вид вкладок

Рис. 1. Вид вкладок

Плавный переход

Переход между вкладками происходит мгновенно, но можно сделать это с небольшим эффектом, если добавить класс fade к блоку с текстом. Тогда текст будет плавно исчезать и появляться. Для активной вкладки обязательно надо включить ещё один класс in , без него возникнут ошибки.

Вкладки на всю ширину

Вот как выглядят подобные вкладки (рис. 2).

Вкладки на всю ширину

Рис. 2. Вкладки на всю ширину

При уменьшении размера окна такие вкладки меняют свой вид и выстраиваются не по горизонтали, а друг под другом (рис. 3).

Вид вкладок при уменьшении размера окна

Рис. 3. Вид вкладок при уменьшении размера окна

Вид вкладок

Традиционно вкладки имеют вид унаследованный из жизни — выступающие из папки кусочки картона с надписью. Заменив класс nav-tabs на nav-pills получим вкладки в виде пилюль (рис. 4).

Изменение вида вкладок

Рис. 4. Изменение вида вкладок

Код будет таким.

Вкладки также можно расположить вертикально, для этого предназначен класс nav-stacked .

Вид таких вкладок продемонстрирован на рис. 5.

Вертикальное расположение вкладок

Рис. 5. Вертикальное расположение вкладок

Автор: Влад Мержевич
Последнее изменение: 05.08.2023

Установка Bootstrap
Модульные сетки
Адаптивный дизайн
Стили
Компоненты
- Группа кнопок
- Ниспадающее меню
- Вкладки
- Хлебные крошки
- Нумерация страниц
- Эскизы
- Сообщения
- Всплывающая подсказка
Как внутри таба сделать еще 2 таба?

Внутри 3 таба нужно сделать еще 2. Кликаешь на 3 таб, а там вместо контента еще 2 таба. Как это реализовать?
```
const tabs = document.getElementById('tabs') const content = document.querySelectorAll('.content') const changeClass = el => < for (let i = 0; i < tabs.children.length; i++) < tabs.children[i].classList.remove('active') >el.classList.add('active') > tabs.addEventListener('click', e => < const currTab = e.target.dataset.btn changeClass(e.target) for (let i =0; i < content.length; i++) < content[i].classList.remove('active') if (content[i].dataset.content === currTab) < content[i].classList.add('active') >> >)
```
```
      2.Tabs TABS
  1
 2
 3
 
 Content 1
 Content 2
 Content 3
 
 
  
```
```
h1 < width: 100%; text-align: center; >.tabs-block-wrapper < width: 100%; display: flex; justify-content: center; align-items: center; flex-flow: column; >#tabs < display: flex; >.tab-btn < width: 100px; height: 40px; font-size: 20px; display: flex; justify-content: center; align-items: center; border: 1px solid black; border-radius: 5px; >.tab-btn.active < background-color: blue; color: #ffffff; >#contents < max-width: 300px; width: 100%; height: 150px; border: 1px solid black; >.content < display: none; >.content.active
```
- Вопрос задан более двух лет назад
- 2264 просмотра
Как сделать табы внутри каждого которых естсь слайдер?

html
- Вопрос задан более трёх лет назад
- 3191 просмотр
Комментировать
Решения вопроса 0
Ответы на вопрос 4

Как положить жирафа в холодильник?
Открыть холодильник, положить туда жирафа, закрыть холодильник.
В чём сложности то?

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать

Ищу работу. Контакты в профиле.

Как сделать табы внутри каждого которых естсь слайдер?

Моя твоя не понимать. Если русский для вас не родной, то лучше задайте вопрос на буржуйском.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

front-end разработчик)
```
     bla bla bla
 
 
```
Разметка может быть такой. А поведение JS привязывай. Тут вариантов куча) А вообще вопросец странный).

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

Сергей Карвасарный @megapihar6
все гениально просто, берем табы (к примеру от сюда — jqueryui.com/tabs )

Слайдеры можно брать какие угодно, и сунуть туда можно, что угодно, от слайдеров , форм и видео до прочей ереси))

Двойной tab-content

На странице не может работать больше одного id. Если их несколько — выбирается первый найденный (с). Это дело можно решить (например) через классы — добавляя уникальные классы тем элементам, которые нужно открыть. Но можно немного схитрить и добавить не абы-какие, а с номерами — чтобы класс открываемой вкладки удачно совпадал с номером кликнутой кнопки (в JS счет начинается от 0, 1, 2. ) поэтому tab0, tab1, tab2 — в соответствии с кнопками.

(код мог бы быть короче, но так по моему смысл более очевиден) — Сперва перебираем и закрываем вообще все вкладки (даже те, которые и так закрыты), убираем активный класс со всех кнопок, а уже потом добавляем класс на текущую кликнутую, открываем нужные вкладки.
```
(function() < //Сохранили все кнопки и все вкладки. const link = document.getElementsByClassName('link'); const tab = document.getElementsByClassName('tab'); let tabN; //Перебираем все кнопки и кругами вешаем на них событие 'клик' //Плюс такого варианта в том, что при клике сразу определяется номер кнопки = это [i] for(let i = 0; i < link.length; i++)< link[i].addEventListener('click', function()< //Перебираем все вкладки и сперва делаем их всех невидимыми for(let u = 0; u < tab.length; u++)< tab[u].style.display = 'none'; >//Перебираем все кнопки и убираем с них "активный" класс for(let u = 0; u < link.length; u++)< link[u].classList.remove('active'); >//Добавляем активный класс на текущую кликнутую кнопку this.classList.add('active'); //Изначально задали переменную tabN для этого: //Ему приписываем классы 'tab' + i, причем - после клика кнопки, это i сразу //становится определенным числом - 0, 1, 2. таким образом если кликнута первая //кнопка, получается здесь написано то же, что и //tabN = document.getElementsByClassName('tab0'); tabN = document.getElementsByClassName('tab' + i); //Вот и перебираем нужные нам классы и всех их делаем видимыми. for(let u = 0; u < tabN.length; u++)< tabN[u].style.display = 'block'; >>); > >)();
```
```
.tab .active
```
```
   bubu - 1
 bubu - 2
 bubu - 3
 kuku - 1
 kuku - 2
 kuku - 3
 dudu - 1
 dudu - 2
 dudu - 3
```
Если вкладок будет 100500, можно еще схитрить и заранее прописать еще одну переменную let previuos; и в самом конце клика добавить previous = i; . Тогда вначале клика можно будет скрывать табы не полным перебором всех подряд, а использовав сохраненное число из предыдущего клика — скрыть только открытые.
Похожие публикации: