Me pregunto por qué no puedo hacer que las pestañas de arranque se correspondan con los enlaces. Probé un montón de soluciones en stackoverflow, pero la estructura del código se ve diferente a la mía porque supongo que no son bootstrap 4.

Aquí está el html de Pestañas usando atributos de datos

 <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="home" role="tabpanel">...</div> <div class="tab-pane" id="profile" role="tabpanel">...</div> <div class="tab-pane" id="messages" role="tabpanel">...</div> <div class="tab-pane" id="settings" role="tabpanel">...</div> </div>

El uso de este JS de otra publicación en realidad cambia el enlace para incluir #página al hacer clic en las pestañas, pero si ingreso esa dirección, siempre vuelve a la página de inicio:

 // Javascript to enable link to tab var url = document.location.toString(); if (url.match('#')) { $('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('show'); } //add a suffix // Change hash for page-reload $('.nav-tabs a').on('shown.bs.tab', function (e) { window.location.hash = e.target.hash; })

Me disculpo porque esta pregunta se ha hecho en diferentes iteraciones en otros lugares, pero no he visto la pregunta base (es decir, cómo hacer esto con el código de inicio de bootstrap) respondida.