Bootstrap tabs opening tabs on another page

Question

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>

They are extremely long pages and my company will not allow that due to non-disclosure agreements. I can only share bits and parts that I can easily change to protect them. — zazvorniki, Oct 03 '13 at 15:34
Well that's what I mean, I need to reproduce the tabs and such.. I don't need the actuall FULL page or whatever. — willbeeler, Oct 03 '13 at 15:34

score 4 · Accepted Answer · answered Oct 03 '13 at 18:14

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

Yeah, I was going to add that last part.. Well, glad to see you got it running. Sorry i didn't get back there soon enough to finish it for ya. Talk to you later. — willbeeler, Oct 04 '13 at 10:38
If this code is not worked, then check your code please. I did not work, too. But I see my code and my code is not `#tabs li` but `#tabs ul`. So please modify it for your code. — Penguin, Jun 15 '15 at 18:04

score 4 · Answer 2 · answered Jan 29 '14 at 02:38

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

Dimitar · Answer 3 · 2016-09-15T14:09:16.753

2

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

edited Sep 15 '16 at 14:09

answered Apr 14 '14 at 17:06

Dimitar

1,830
5
32
52

score 0 · Answer 4 · edited May 23 '17 at 10:31

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.

This seems to highlight the right tab, but the right content is not showing. It's just showing the default content. — zazvorniki, Oct 03 '13 at 16:39
I am working on this.. But I will be back in an hour to fix it and submit it to you. Thx. — willbeeler, Oct 03 '13 at 16:43

Singh Cloud · Answer 5 · 2014-11-06T08:24:16.020

0

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>

edited Nov 06 '14 at 08:24

answered Nov 06 '14 at 08:15

Singh Cloud

1
2

Can I ask how this differs from the answer posted? I just looked at them side by side, but could not see the difference... – zazvorniki Nov 07 '14 at 15:17
if you check the class of div id ="homeTab" it is showing class="tab-pane fade in active" where "in active" represents active. if u remove "in" then contents of the div is not showing in my case or if u use $(this).addClass('active'); then also it is not showing content after clicking the tab from other page, it is showing nav bar only. – Singh Cloud Nov 15 '14 at 17:48
the above code is working perfectly fine in my case.i have copy pasted the code from your post but that was not working in my case so i have debugged it and modified it according to my working case – Singh Cloud Nov 15 '14 at 17:49
So all that really changed are the id names and the different html other than that the jQuery stayed the same? – zazvorniki Nov 17 '14 at 20:26
in jquery change the lines:$(this).removeClass('active'); to $(this).removeClass('in active'); and $(this).addClass('active'); to $(this).addClass('in active'); and change the class in the content section of the nav bar to
– Singh Cloud Nov 18 '14 at 14:23

Bootstrap tabs opening tabs on another page

5 Answers5

Linked