zazvorniki zazvorniki - 6 months ago 82
Javascript Question

Bootstrap tabs opening tabs on another page

I have a page that has bootstrap tabs on it and they are linking to the right content area on that page.

When you are lead away from that page I have the same tabs at the top that I would like to lead them back to the previous page with the right tab open.

This is what my tabs look like on the external page

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li><a href="page.php#submitted">Submitted</a></li>
<li class="active"><a href="page.php#approved" data-toggle="tab">Approved</a></li>
<li><a href="page.php#rejected">Rejected</a></li>
<li><a href="page.php#uploaded">Uploaded</a></li>
</ul>


As you can see I have tried linking to that page and calling out the id, which goes to the right page, but does not open that tab.

I have also tried messing around with it in jquery, but nothing valid enough to show. Any help would be much appreciated!

edit:

The tabs on the other page look like this. Just basic bootstrap tabbing.

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#submitted" data-toggle="tab">Submitted</a></li>
<li><a href="#approved" data-toggle="tab">Approved</a></li>
<li><a href="#rejected" data-toggle="tab">Rejected</a></li>
<li><a href="#uploaded" data-toggle="tab">Uploaded</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="submitted">
</div>
<div class="tab-pane" id="approved">
</div>
<div class="tab-pane" id="rejected">
</div>
<div class="tab-pane" id="uploaded">
</div>
</div>

Answer

I ended up working on this some more and came up with this that does select the right tab and open the right content panel

  //grabs the hash tag from the url
  var hash = window.location.hash;
  //checks whether or not the hash tag is set
  if (hash != "") {
    //removes all active classes from tabs
    $('#tabs li').each(function() {
      $(this).removeClass('active');
    });
    $('#my-tab-content div').each(function() {
      $(this).removeClass('active');
    });
    //this will add the active class on the hashtagged value
    var link = "";
    $('#tabs li').each(function() {
      link = $(this).find('a').attr('href');
      if (link == hash) {
        $(this).addClass('active');
      }
    });
    $('#my-tab-content div').each(function() {
      link = $(this).attr('id');
      if ('#'+link == hash) {
        $(this).addClass('active');
      }
    });
  }

Thank you willbeeler for the good start! :)