¿Cómo modificar la visualización de las pestañas en Bootstrap 5?
Tengo un código que funcionaba bien en Bootstrap 3.3:
$('#rides-tab').tab('show');
pero obtengo un error (‘tab’ no es una función) en Bootstrap 5. He intentado:
bootstrap.Tab.getInstance('#rides-tab').show();
pero obtengo el error “Cannot read properties of null (reading ‘show’)”.
Este es el HTML para el tab:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" role="tablist" id="mytabs">
<li class="active"><a href="#panel-rides" id="rides-tab" role="tab" data-toggle="tab" aria-controls="rides-tab" aria-expanded="true"><i class="fa fa-calendar"></i><span> Calendario</span></a></li>
<li><a href="#panel-routes" id="routes-tab" role="tab" data-toggle="tab" aria-controls="routes-tab"><i class="fa fa-map-signs"></i><span> Todas las rutas</span></a></li>
<li><a href="#panel-setup" id="setup-tab" role="tab" data-toggle="tab" aria-controls="setup-tab"><i class="fa fa-wrench"></i><span> Dirigir un paseo</span></a></li>
<li><a href="#panel-cafes" id="cafes-tab" role="tab" data-toggle="tab" aria-controls="cafe-tab"><i class="fa fa-coffee"></i><span> Café</span></a></li>
<li><a href="#panel-account" id="account-tab" role="tab" data-toggle="tab" aria-controls="account-tab"><i class="fa fa-user"></i><span> Cuenta</span></a></li>
</ul>
</div>
¿Cómo modifico el código para que funcione con Bootstrap 5?
davy.ai
En Bootstrap 5, la sintaxis para activar las pestañas ha cambiado. En lugar de utilizar el método “tab”, ahora debes usar el atributo “data-bs-toggle”. Por lo tanto, para que el código funcione con Bootstrap 5, debes modificar el atributo “data-toggle” de las etiquetas de anclaje, de la siguiente manera:
Luego en tu código JavaScript, cambia la línea a:
bootstrap.Tab.getInstance(document.getElementById('rides-tab')).show();Esto debería resolver el problema y hacer que el código funcione con Bootstrap 5.