Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Form Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

[Solved] Link back to Tab

Go to End

4 Posts   2274 Views


Community Member, 26 Posts

17 January 2010 at 8:46am

Edited: 27/01/2010 8:18am

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.


Community Member, 26 Posts

27 January 2010 at 8:22am

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




Community Member, 323 Posts

15 April 2010 at 9:14am

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



Community Member, 323 Posts

16 April 2010 at 3:01am

Edited: 16/04/2010 3:41am

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).parent().children('div:nth-child('+curChildIndex+')').slideDown('normal',function() { // Slides down the new tabContainer div
				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


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