Leí laIntroducción de Bootstrap, la página de navegación y pestañas , esta respuesta y muchas otras, aún no puedo entender cuál es mi error.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <div class="nav nav-tabs" role="tablist"> <button class="nav-link active" data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i class="bi-gear"></i> Systems</button> <button class="nav-link" data-bs-target="#tabUpgrades"><i class="bi-download" data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"></i> Upgrades</button> </div> <div class="tab-content"> <div id="tabSystems" class="tab-pane fade show active" role="tabpanel"> aaaaa </div> <div id="tabUpgrades" class="tab-pane fade" role="tabpanel"> bbbbb </div> </div>Como puede ver, las pestañas no se alternan. De lo que aprendí:
data-bs-toggle y data-bs-target : hechonav-link , tab-pane , etc... : hecho¿Qué me falta todavía?
No fue fácil de detectar pero tiene un error en su segundo botón
pones data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades" en la etiqueta <i>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <div class="nav nav-tabs" role="tablist"> <button class="nav-link active" data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i class="bi-gear"></i> Systems</button> <button class="nav-link" data-bs-target="#tabUpgrades" data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"><i class="bi-download" ></i> Upgrades</button> </div> <div class="tab-content"> <div id="tabSystems" class="tab-pane fade show active" role="tabpanel"> aaaaa </div> <div id="tabUpgrades" class="tab-pane fade" role="tabpanel"> bbbbb </div> </div>