Con bootstrap 5, nunca pude obtener la pestaña activada. según su sitio web , solo obtengo la identificación del primer botón, no la pestaña activada y nada más.
var tabEl = document.querySelector('button[data-bs-toggle="tab"]') tabEl.addEventListener('shown.bs.tab', function (event) { alert(event.target.id) // newly activated tab // event.relatedTarget // previous active tab }) <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> </div>Necesito la identificación de las pestañas una vez que se hace clic en el botón relacionado.
Su secuencia de comandos solo encuentra el primer button[data-bs-toggle="tab"] que necesita para usar document.querySelectorAll('button[data-bs-toggle="tab"]') y luego recorre NodeList.
Seleccionar el elemento del panel de pestañas activo real requiere un poco más de trabajo preliminar. event.target y event.relatedTarget son los botones de pestaña y su valor de atributo data-bs-target es el selector para el panel de pestañas asociado.
Consulte el fragmento actualizado:
var tabEl = document.querySelectorAll('button[data-bs-toggle="tab"]') //console.log(tabEl) for (i = 0; i < tabEl.length; i++) { tabEl[i].addEventListener('shown.bs.tab', function(event) { const activated_pane = document.querySelector(event.target.getAttribute('data-bs-target')) const deactivated_pane = document.querySelector(event.relatedTarget.getAttribute('data-bs-target')) console.log(activated_pane.id) // console.log(deactivated_pane.id) // do stuff activated_pane.append(' hello ' + activated_pane.id) }) } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>Está utilizando querySelector, que selecciona solo el primer elemento. Utilice querySelectorAll, que selecciona todas las pestañas.
/* // Using Vanilla JS var tabEl = document.querySelectorAll('button[data-bs-toggle="tab"]') tabEl.forEach(function(el){ el.addEventListener('shown.bs.tab', function (event) { alert(event.target.id) // newly activated tab // event.relatedTarget // previous active tab }) }) */ /* // Using jQuery */ $('button[data-bs-toggle="tab"]').on('click', function (e) { // here is the new selected tab id var selectedTabId = e.target.id; console.log('tab changed', selectedTabId); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> </div>