Onload bootstrap tab trigger

Question

The active class isn't working and I've tried body On-load click trigger and obviously show tab using id and many other ways, however nothing seems to be working. I have hashed the URL to enable tabs to be linked individually in the search. Any help is much appreciated.

JS: to hash the URL and jump to tab

// jump to tab if it exists 
if (location.hash) {
  $('a[href=' + location.hash + ']').tab('show');
  }

  // add tab hash to url to persist state
  $(document.body).on("shown.bs.tab", function(e){
  location.hash = e.target.hash;
  });

});

JS: To go to tab home (not working)

$("document").ready(function(){
$("#home").trigger("click");
});

HTML:

<div class="col-xs-5 col-md-2 nopadding">
  <nav class="nav-sidebar">
    <ul class="nav tabs">
    <li class="lead3"><a href="#home" class="active" data-toggle="tab">Home </a></li>
   <li class="lead3"><a href="#tab1" data-toggle="tab">tab1</a></li>
   <li class="lead3"><a href="#tab3" data-toggle="tab" >tab3</a></li>                               
   <li class="lead3"><a href="#contact" data-toggle="tab"> Contact </a></li>                                                                                                                   
 </ul>
</nav>

tab-pane:

<div class="tab-pane active fade text-style" id="home"> . .. </div>

Answer 1

What you expect from this line?

$("home").trigger("click");

I suppose Jquery can't find element here $("home") . You could evaluate it in console for check. if you are going to find element with class 'home' or id 'home' then you should use $(".home") or $("#home") properly.

Answer 2

It looks like your Document Ready event doesn't work. Try remove the quotes around the $("document").

A shorter method for this event is as follows:

$(function() {

});

Answer 3

I know that this is very late but I'd like to post my solution since this was something that I was stuck on as well. There's an important subtlety that I think is easy to miss. You want to trigger the click on the <a> tag inside the nav, not the actual panel. Remember you click on the tab not on the panel to trigger it into view. So to get the correct tab to show when the user navigates to /my/path#home you want to bind on the hashchange event and click the correct element. See https://stackoverflow.com/a/680865/5262119 for more info on binding to the hashchange event.

$(window).bind('hashchange', function(event){
  var hash = window.location.hash;
  // get the actual anchor tag that links to the panel
  var $matchingAnchor = $('nav a[href^="' + hash + '"');
  if ($matchingAnchor) $matchingAnchor.click();
});

And assuming you want to restrict this to trigger only a certain page then you can add a location check:

$(window).bind('hashchange', function(event){
  var path = window.location.pathname;
  var hash = window.location.hash;
  var $matchingAnchor = $('nav a[href^="' + hash + '"');

  var contextRegex = /my\/page/;
  var correctPage = contextRegex.test(path);
  if (correctPage && $matchingAnchor) $matchingAnchor.click();
});

I imagine you also want to make sure that clicks on the tabs update the hash in the URL window so bind to the tabs event:

$('nav a').on('click',function() {
  var $a = $(this);
  var hash = $a.attr("href");
  window.location.hash = hash;
});

This would go inside your ready function. You will also have to make sure that the function that triggers the click happens when the page first loads.

Complete solution:

$(document).ready(function() {
  // Declare clickback function
  function triggerTabClick() {
    var path = window.location.pathname;
    var hash = window.location.hash;
    var $matchingAnchor = $('nav a[href^="' + hash + '"');    

    var contextRegex = /my\/page/; // or whatever you want this to be
    var correctPage = contextRegex.test(path);
    if (correctPage && $matchingAnchor) $matchingAnchor.click();
  }    

  // Trigger it when the hash changes
  $(window).bind('hashchange', triggerTabClick);    

  // Trigger it when the page loads
  triggerTabClick();    

  // Hook into click for tabs to make sure hash is updated on click
  $('nav a').on('click',function(event){
    event.preventDefault();
    var $a = $(this);
    var hash = $a.attr("href");
    var window.location.hash = hash;
  })
})