I have a basic jQuery tabs system going:
$(document).ready(function(){
$('#tabs div.jdiv').hide();
$('#tabs div.jdiv:first').fadeIn("slow");
$('#tabs ul.jdiv li:first').addClass('active');
$('#tabs ul.jdiv li a').click(function(){
$('#tabs ul.jdiv li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div.jdiv').hide();
$(currentTab).fadeIn("slow");
return false;
});
});
<div id="tabs" style="position:relative; ">
<ul class="jdiv">
<li><a href="#current-points">Current Points</a></li>
<li><a href="#my-details">My Details</a></li>
<li><a href="#prizes">Prizes</a></li>
<li><a href="#basket">Your sack</a></li>
<li><a href="#order-history">Order History</a></li>
</ul>
<div id="current-points" class="jdiv" style="position:relative;">
<?php include('current-points.php');?>
</div>
etc....
My issue is, I am planning on having another set of jQuery tabs within one of these pages, which isnt a problem, but when they click on a link or refresh the page, is it possible to stay on the same tab? On the parent or child set of tabs?
Thanks!
Not easily. The client side script is reloaded when you refresh the page, and all changes will be undone, unless of course you store it somewhere — possibly as a URL parameter?
To preserve the current tab open after the page is refreshed only solution coming in my mind is using cookies, I think it's the only one.
If you use a link in the web page, on the other hand, to refresh the page you could add an anchor to it with the tab opened at the time.
You can use hash tags to uniquely identify each tab, so
http://example.com/yourpage.html#current-points
takes you to thecurrent-points
tab, andhttp://example.com/yourpage.html#my-details
takes you to themy-details
tab. You can set the hash by assigning tolocation.hash
, and of course you can read that on page load. This also has the huge advantage that your users can bookmark the tabs they want. You can use a path in the hash if you have tabs within tabs (so#first/foo
takes you to thefirst
tab and itsfoo
subtab;#first/bar
takes you to thefirst
tab and itsbar
subtab).Here's a really basic example (without subtabs, but you get the idea):
Live copy | Live source
HTML:
JavaScript:
Alternately (or in conjunction), you can set a cookie when they change tabs, and check for the cookie on page load to select the last tab they had selected.