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

Question

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...)




  
    Annegret Schallman
  
  
    Nadine Schröter
  
  
    Britta Szidzik

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"

Is there any help?

Here is the live preview site:https://www.uni-goettingen.de/de/vorschau_c4985eafb982d71cc99d41d205306731/658371.html

user_6214210 · Answer

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');
});






    
        
            Annegret Schallman
        
        
            Nadine Schröter
        
        
            Britta Szidzik
        
    


    Annegret Schallman
    Nadine Schröter
    Britta Szidzik

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

1 Answers