I'm trying to get JS to select ONE random nav-item which then shows it's content. So far I could only get the JS to select ALL nav-items (or not - randomized). The code is too large, so I would only paste some of it.
JS
$(document).ready(function(){
var i = Math.floor(Math.random() * 3) + 1
if(i == 1)
$('.taby .nav-item').addClass("active");
});
HTML
*nav-link is supossed to have "active" (so it would look like "nav-item active" (i achieved that with js, but for all nav-items...)
<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>
also together with the nav-item (every nav-item conencts to a specific div) the tab-pane should change to "tab-pane fade show in"
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
Is there any help?
Here is the live preview site:https://www.uni-goettingen.de/de/vorschau_c4985eafb982d71cc99d41d205306731/658371.html
.eq() method
to select the corresponding random tab..tab('show') to show the randomly selected tab.Try this
$(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>