Estoy tratando de agregar un panel de pestañas de Bootstrap que es así:
<ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">First Panel</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Second Panel</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Third Panel</a> </li> </ul><!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="tabs-1" role="tabpanel"> <p>First Panel</p> </div> <div class="tab-pane" id="tabs-2" role="tabpanel"> <p>Second Panel</p> </div> <div class="tab-pane" id="tabs-3" role="tabpanel"> <p>Third Panel</p> </div> </div>Ahora necesito dar un enlace a los usuarios para ver los paneles como este:
https://sitename.com/page#tabs-2 Pero esto no funcionará porque el panel de pestañas con una identificación de tabs-2 no tiene la clase .active .
Sin embargo, si intento cargar https://sitename.com/page#tabs-1 , la página me redirige correctamente al panel de pestañas con una identificación de tabs-1 (porque tiene la clase .active por defecto)
Entonces, ¿cómo puedo redirigir a los usuarios a diferentes paneles de pestañas correctamente?
Ya comencé a responder tu antigua pregunta antes de que la borraras, pero aquí está de nuevo. No entendí lo que estabas tratando de lograr, así que miré el código e hice mi versión, no es la mejor pero funciona.
Este es un controlador de eventos onClick, se ejecuta con un clic en su navegador y cambia las clases activas.
// onClick event handler, gets executed on click $(".nav-link").on("click", (e) => { // store clicked element const listItem = e.target; // get hash const hash = e.target.hash; // remove all active classes $(".nav-link, .tab-pane").removeClass("active"); // add active class to list item and tab panes $(listItem).add(hash).addClass("active"); });Esta parte se ejecuta cuando recargas tu página. Debe cambiar su HTML para que esto funcione, así que elimine la clase activa de nav-link y asigne a cada enlace una clase adicional (tabs-1, tabs-2 y tabs-3).
// when page is reloaded $(document).ready(() => { // get current hash const hashList = window.location.hash; const hashItems = hashList.slice(1); // remove all active classes $(".nav-link, .tab-pane").removeClass("active"); // add active class to nav-link and pane $(hashList).add(`.${hashItems}`).addClass("active"); });Ambos fragmentos deben incluirse en su etiqueta de secuencia de comandos, por supuesto, también debe importar jQuery, si aún no sucedió.
1) Importar jQuery desde aquí o:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>2) Agregue esta parte a su código.
<script> $(document).ready(function () { $('.nav-tabs a').click(function () { $(this).tab('show'); }); }); </script>