Hi all,

I have a form which has a TabSet with severals Tab, each Tab has links to perform actions on other pages.

The problem we have is that when navigating to another page from a Tab, and return not reopen the original open, if not initial Tabset Tab.

For example:

 _____     _____
|Tab1 \-- |Tab2 \  User select Tab2 and navigate to other page with a link in Tab2 
----------|

User press back button

 _____     _____
|Tab1 \-- |Tab2 \  Now Tab1 is selected :(
      |----------

Can we change this behavior?

We saw that each Tab is marked with #, but this is not saved with a link back to navigate to another page.

Thanks in advance.

I changed default Tabs from SS distribution a JQuery Tabs, a cookie is then used to determine the initially selected tab.

http://docs.jquery.com/UI/Tabs#option-cookie

Enjoy

Ricardo

Hi Ricardo.

I was looking for that. I have some tabs as you had (with the SS code). Could you please further explain the cookie code? The jQuery UI site is down, I cannot download the Tabs plugin, so I thought I could got the solution even before the actual code! ;-)

Regards,
Juan

Hey, I found it by myself! The cookie isn’t stored at every tab click, but only when going out of the page. Here’s the JS code (which not uses Tabs plugin, but the Cookie one):

;(function($) { // Wrapper to prevent errors with other scripts
$(document).ready(function() { // jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event

	var curChildIndex; // Define as global
	
	if($.cookie('active_tab') == null) { // If no cookie is set…
		$('ul.tabNav li:first').addClass('current'); // …mark as current the first Title item
		$('.tabContainer .tab:first').addClass('current').slideDown('fast', myClick); // …show the first tab content
	} else {
		var cookieChildIndex = $.cookie('active_tab');
		$('ul.tabNav li:nth-child('+cookieChildIndex+')').addClass('current'); // …mark as current the Title item stored in cookie
		$('.tabContainer div:nth-child('+cookieChildIndex+')').addClass('current').slideDown('fast', myClick); // …show the content of the corresponding tab
	}

	function myClick() {
		$('ul.tabNav a').click( // On click…
			function() {
				curChildIndex = $(this).parent().prevAll().length + 1; // Sets the current li index	
				$(this).parent().parent().children('.current').removeClass('current'); // Remove the old current class from li
				$(this).parent().addClass('current'); // Adds the current class to the current li
				$(this).parent().parent().next('.tabContainer').children('.current').slideUp('fast',function() { // Slides up the old tabContainer div (the current tab)
					$(this).removeClass('current');
					$(this).parent().children('div:nth-child('+curChildIndex+')').slideDown('normal',function() { // Slides down the new tabContainer div
						$(this).addClass('current');
					});
				});
				return false;
			}
		);
	}
	
	$('a').not($('ul.tabNav a')).click(function(){$.cookie('active_tab', curChildIndex)}); // Set a session cookie with the current li index when going to another page

})
})(jQuery);

It’s one of my first JS codes, don’t expect it to be a model…

Cheers,
Juan