Estoy tratando de hacer que JS seleccione UN elemento de navegación aleatorio que luego muestra su contenido. Hasta ahora, solo pude hacer que el JS seleccionara TODOS los elementos de navegación (o no, al azar). El código es demasiado grande, por lo que solo pegaría una parte.
JS
$(document).ready(function(){ var i = Math.floor(Math.random() * 3) + 1 if(i == 1) $('.taby .nav-item').addClass("active"); });HTML
*Se supone que el enlace de navegación tiene "activo" (por lo que se vería como "elemento de navegación activo" (lo logré con js, pero para todos los elementos de navegación...)
<div id="tabs"> <div class="taby"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> <a class="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Annegret Schallman</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Nadine Schröter</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Britta Szidzik</a> </li> </ul> </div>también junto con el elemento de navegación (cada elemento de navegación se conecta a un div específico), el panel de pestañas debe cambiar a "presentación gradual del panel de pestañas"
<div class="tab-content" id="pills-tabContent"> <div class="tab-pane" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">¿Hay alguna ayuda?
Aquí está el sitio de vista previa en vivo: https://www.uni-goettingen.de/de/vorschau_c4985eafb982d71cc99d41d205306731/658371.html
.eq() de jquery para seleccionar la pestaña aleatoria correspondiente..tab('show') para mostrar la pestaña seleccionada al azar.Prueba esto
$(document).ready(function(){ let tabs = $('.taby .nav-link'); var i = Math.floor(Math.random() * tabs.length); tabs.eq(i).tab('show'); }); <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <div class="taby"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="false">Annegret Schallman</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Nadine Schröter</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Britta Szidzik</a> </li> </ul> </div> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Annegret Schallman</div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Nadine Schröter</div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Britta Szidzik</div> </div>