Random 'active' nav-tab (Bootstrap)

Question

How can I make my Bootstrap 'nav-tabs' tab be dynamic and randomize the active one on document load (everytime site loads)?

I have the following schema: https://www.bootply.com/scKyFxqsNG

Thanks

Answer 1

You can do something like this:

$(document).ready(function(){

  //Generate random number

  var rand = Math.floor(Math.random()*3);

  //Select `li` at random and add a class

  $("#home-tabs-menu li").eq(rand).addClass('active');

  // Select `li a` at random and use .show();

  $("#home-tabs-menu li a").eq(rand).show();

});

Answer 2

On every load, use javascript random to get a number and set the active class depending on the result

 var i = Math.floor(Math.random() * 3) + 1  
 if(i == 1)
 $("#tab1").addClass(".active")