CODEWITHSUNDEEP
jquerytwitter-bootstrap
zazvorniki
zazvorniki

Reputation: 3602

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>

Upvotes: 4

Views: 21607

Answers (5)

Dimitar
Dimitar

Reputation: 1928

i think this will work as well. i test it and it is working for me :)

$(document).ready(function() {
   var hash = window.location.hash;
   hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

Upvotes: 2

Singh Cloud
Singh Cloud

Reputation: 1

A Little Modification that works for me:

<script>
$( document ).ready(function() {
//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');
});
$('#myTabContent div').each(function() {
  $(this).removeClass('in 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');
  }
});
$('#myTabContent div').each(function() {

  link = $(this).attr('id');
  if ('#'+link == hash) {

    $(this).addClass('in active');
  }
});
}
});
</script>

Tab Portion:

<ul id="tabs" class="nav navbar-nav">
   <li class="active"><a data-toggle="tab" href="#homeTab">Home</a></li>
   <li><a data-toggle="tab" href="#accountTab">Accounts</a></li>
</ul>

Tab Content Portion:

<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="homeTab">
   </div>
   <div class="tab-pane fade" id="accountTab">
   </div>
</div>

Url Used in external Link: 

<a href="/YourPageName#YourTabName">Account</<a>

In my Case Url looks like:

 <a href="/IndexPage#accountTab">Account</a>

Upvotes: 0

user3247038
user3247038

Reputation: 41

This could be greatly simplified by leveraging tab('show').

$(document).ready(function() {
   var hash = window.location.hash;

   if (hash != "")
       $('#tabs a[href="' + hash + '"]').tab('show');
   else
       $('#tabs a:first').tab('show');
});

Upvotes: 4

zazvorniki
zazvorniki

Reputation: 3602

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! :)

Upvotes: 4

willbeeler
willbeeler

Reputation: 689

OK, I tested this out and it worked for me. Add the following code some place after you call jQuery. This should go on page.php (your primary page that the external page links to). Let me know if this helps.

$( document ).ready(function() {
  //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');
    });
    //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');
      }
    });
  }

});

EDIT: By the way, I need to give some props to the following Stack overflow question: Getting URL hash location, and using it in jQuery That's where I got that first line to find the hash variable.

Upvotes: 0

Related Questions