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

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 >
<ul  id="pills-tab" role="tablist">
  <li >
    <a  id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Annegret Schallman</a>
  </li>
  <li >
    <a  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 >
    <a  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  id="pills-tabContent">
  <div  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

CodePudding user response：

After generating the random number, use jquery's .eq() method to select the corresponding random tab.
Use .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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<div >
    <ul  id="pills-tab" role="tablist">
        <li  role="presentation">
            <a  id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="false">Annegret Schallman</a>
        </li>
        <li  role="presentation">
            <a  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  role="presentation">
            <a  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  id="pills-tabContent">
    <div  id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Annegret Schallman</div>
    <div  id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Nadine Schröter</div>
    <div  id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Britta Szidzik</div>
</div>