Select only one random nav-item and show content (bootstrap)

April 28, 2022

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.

$(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

>Solution :

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>