Как получить идентификатор активной вкладки

Мне нужно получить идентификатор активной панели вкладок каждый раз, когда я переключаюсь с вкладки на вкладку на своей странице, и, в зависимости от того, какая панель вкладок (вкладка-панель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"));

Где ваш JavaScript? Пожалуйста, добавьте это к этому, я рекомендую создать скрипт кода (значок <> в редакторе вопросов), чтобы ваша проблема могла быть эффективно воспроизведена.

Nathaniel Flick 24.11.2022 19:23

Этот вопрос уже задавали раньше, см. ответ с более чем 2900 отзывами здесь: stackoverflow.com/questions/3239598/… . А с Bootstrap вы можете использовать показанное событие bs tab: getbootstrap.com/docs/5.0/components/navs-tabs/#events вместо того, чтобы писать свое собственное.

Nathaniel Flick 24.11.2022 20:04

Данное решение работает только при загрузке, мне требуется идентификатор каждый раз, когда я переключаюсь с вкладки на вкладку.

SOUserNumber613 24.11.2022 20:09
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
271
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать класс 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 и срез.

Другие вопросы по теме