Мне нужно получить идентификатор активной панели вкладок каждый раз, когда я переключаюсь с вкладки на вкладку на своей странице, и, в зависимости от того, какая панель вкладок (вкладка-панель1, вкладка-панель2, вкладка-панель3), хранить ( tab-pane1 = 1 и так далее) в переменную и отображать в консоли.
Используя vanilla JS или jQuery, оба в порядке.
мой код выглядит так
<ul class = "nav nav-tabs nav-success" role = "tablist">
<li class = "nav-item" role = "presentation">
<a class = "nav-link active" data-bs-toggle = "tab" href = "#tab-pane1" role = "tab" aria-selected = "true">
<div class = "d-flex align-items-center">
<div class = "tab-title">tab-pane1
</div>
</div>
</a>
</li>
<li class = "nav-item" role = "presentation">
<a class = "nav-link" data-bs-toggle = "tab" href = "#tab-pane2" role = "tab" aria-selected = "false" tabindex = "-1">
<div class = "d-flex align-items-center">
<div class = "tab-title">tab-pane2
</div>
</div>
</a>
</li>
<li class = "nav-item" role = "presentation">
<a class = "nav-link" data-bs-toggle = "tab" href = "#tab-pane3" role = "tab" aria-selected = "false" tabindex = "-1">
<div class = "d-flex align-items-center">
<div class = "tab-icon">
</div>
<div class = "tab-title">tab-pane3
</div>
</div>
</a>
</li>
</ul>
<div class = "tab-content py-3">
<div class = "tab-pane fade active show" id = "tab-pane1" role = "tabpanel">
<!-- content tab-pane1 -->
</div>
<div class = "tab-pane fade" id = "tab-pane2" role = "tabpanel">
<!-- content tab-pane2 -->
</div>
<div class = "tab-pane fade" id = "tab-pane3" role = "tabpanel">
<!-- content tab-pane3 -->
</div>
Мой jQuery выглядит так.
console.info($(".tab-pane.active").attr("id"));
Этот вопрос уже задавали раньше, см. ответ с более чем 2900 отзывами здесь: stackoverflow.com/questions/3239598/… . А с Bootstrap вы можете использовать показанное событие bs tab: getbootstrap.com/docs/5.0/components/navs-tabs/#events вместо того, чтобы писать свое собственное.
Данное решение работает только при загрузке, мне требуется идентификатор каждый раз, когда я переключаюсь с вкладки на вкладку.
Вы можете использовать класс shown.bs.tab
, чтобы получить номер активной вкладки. Получите атрибут активной вкладки href
и нарежьте, чтобы получить желаемый результат.
Пример:
console.info($("a.active").attr("href").slice(-1)); // Get value when page load if needed
$('a[data-bs-toggle = "tab"]').on('shown.bs.tab', function(e) {
var result = $(e.target).attr("href").slice(-1); // get activ tab number
console.info(result);
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" />
<ul class = "nav nav-tabs nav-success" role = "tablist">
<li class = "nav-item" role = "presentation">
<a class = "nav-link active" data-bs-toggle = "tab" href = "#tab-pane1" role = "tab" aria-selected = "true">
<div class = "d-flex align-items-center">
<div class = "tab-title">tab-pane1
</div>
</div>
</a>
</li>
<li class = "nav-item" role = "presentation">
<a class = "nav-link" data-bs-toggle = "tab" href = "#tab-pane2" role = "tab" aria-selected = "false" tabindex = "-1">
<div class = "d-flex align-items-center">
<div class = "tab-title">tab-pane2
</div>
</div>
</a>
</li>
<li class = "nav-item" role = "presentation">
<a class = "nav-link" data-bs-toggle = "tab" href = "#tab-pane3" role = "tab" aria-selected = "false" tabindex = "-1">
<div class = "d-flex align-items-center">
<div class = "tab-icon">
</div>
<div class = "tab-title">tab-pane3
</div>
</div>
</a>
</li>
</ul>
<div class = "tab-content py-3">
<div class = "tab-pane fade active show" id = "tab-pane1" role = "tabpanel">
<!-- content tab-pane1 -->
</div>
<div class = "tab-pane fade" id = "tab-pane2" role = "tabpanel">
<!-- content tab-pane2 -->
</div>
<div class = "tab-pane fade" id = "tab-pane3" role = "tabpanel">
<!-- content tab-pane3 -->
</div>
Примечание: в теге привязки нет идентификатора атрибута, поэтому я ловлю атрибут href и срез.
Где ваш JavaScript? Пожалуйста, добавьте это к этому, я рекомендую создать скрипт кода (значок <> в редакторе вопросов), чтобы ваша проблема могла быть эффективно воспроизведена.