Bootstrap вкладок в разделах - PullRequest
Новая
       20

Bootstrap вкладок в разделах

0 голосов
/ 07 апреля 2020

Я начал со стандартного bootstrap элемента управления вкладками и хочу разделить вкладки на несколько разделов. Я сделал это, сделав div для всего лота и div для каждого раздела, со своим собственным ul вкладок. Это работает нормально, за исключением того, что активный класс очищается только для неактивных вкладок в том же ul, что и вкладка, которая только что стала активной, поэтому в каждой группе до одной вкладки отображается активной. У меня есть немного js, который использует Jquery, чтобы деактивировать их всех, затем активировать тот, который только что стал активным (см. Ниже), но это похоже на хак. Есть ли способ сказать bootstrap, что все эти ul на самом деле являются одним элементом управления вкладками? 

let tabs = $('#tabs li');
tabs.find('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    tabs.removeClass('active');
    $(e.target).parent('li').addClass('active');
});

Редактировать: Желаемый результат этого должен иметь что-то вроде этого: Section 1: { Tab1, Tab2, Tab3 }, Section 2: { Tab4, Tab5.active } Каждый раздел имеет свой собственный UL вкладок, но они все равно должны обрабатываться так, как если бы они представляли собой единый набор вкладок, поскольку они контролируют только одну панель вкладок, поэтому одновременно должна быть активна только одна вкладка.

1 Ответ

0 голосов
/ 07 апреля 2020

Правильно ли я понимаю, что у вас есть 2 уровня вкладок 

Level one -> Tab1 active | Tab2   | Tab3   | Tab4   | Tab5   |
Level two -> Tab1.1  | Tab1.2   | Tab1.3 active| Tab1.4   | Tab1.5

этот уровень 2 существует для некоторых / всех вкладок уровня 1. Так в чем же проблема, что вкладка на уровне 2 остается активной, если не отображается. Bootstrap использует это для отображения последней выбранной вкладки на уровне 2.
Если вам это не нравится, у вас есть два позибиллита

  • , чтобы взломать, чтобы очистить все активные состояния (почему?) ИЛИ
  • вы назначаете активным при выборе новой вкладки level1 для некоторых нужных вам правил.

Нет необходимости очищать все активные уровни 2, чтобы идентифицировать актив текущего использования уровня 1 родитель = активное и дочернее = активное отношение для идентификации текущей вкладки на уровне2
РЕДАКТИРОВАТЬ
Если вы разделите ul, то для bootstrap это другое меню. Поэтому, если вы хотите использовать стандартную функцию отдельно, стилизуя или с другими css элементами. Нет хорошего решения нарушить «стандартное поведение», а затем взломать. Это будет адский уход и обновление. Таким образом, ваши "секции" должны быть css группами.

Примеры: 

<li class="divider"></li> <!-- standard -->
<li class="my_seperator"></li> <!-- style my_seperator as you want with css
- you can make it look like ul 
if you copy the ul styling from bootstrap.css -->

Подробнее в документации navs или документации navbar

...