¿Cómo podría vincular las pestañas de Bootstrap 5 directamente como con los métodos de Bootstrap anteriores de acuerdo con?:
He intentado el siguiente enfoque:
var hash = location.hash.replace(/^#/, ""); // ^ means starting, meaning only match the first hash if (hash) { var someTabTriggerEl = document.querySelector("#" + hash + ""); var tab = new bootstrap.Tab(someTabTriggerEl); tab.show(); }Suponiendo que el disparador de la pestaña es de una lista <ul> , y el hash de la cadena de consulta es el objetivo en el href , entonces el método Bootstrap 5 para mostrar una pestaña cuando se carga la página sería:
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#someTarget">Some Target</a> </li> </ul> document.addEventListener("DOMContentLoaded", () => { const trigger = document.querySelector(`ul.nav a[href="${window.location.hash}"]`) const tab = new bootstrap.Tab(trigger) tab.show() })Lo anterior no busca nombres hash de cadenas de consulta no válidos o elementos dom válidos; agregue según sea necesario.
Actualmente resuelto esto con:
var hash = location.hash.replace(/^#/, ""); if (hash) { var triggerEl = document.querySelector("#" + hash + "-tab"); triggerEl.click(); }