We help IT Professionals succeed at work.

jquery cookie help on selected tabs

dolythgoe
dolythgoe asked
on
Hi all,

I have a script which fades in content between tabs but I'm looking to add cookie code that I've successfully used elsewhere. I'm using the cookie jquery plugin:

http://plugins.jquery.com/project/Cookie

Here's my tab code: - looking to default to :first if nothing is set in the cookie or get the selected state from the cookie and display that first

//Load/Hide Tabs
$(document).ready(function() {

	//When page loads...;
	$(".tab_content").hide(); //Hide all content

	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	

	//On Click Event
	$("ul.tabs li").click(function() {
		alert(this);
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		
		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});


});

Open in new window

Comment
Watch Question

Try:
	//When page loads...;
	$(".tab_content").hide(); //Hide all content

	var tabnum = $.cookie('the_tab')
	if (tabnum !== '') {
		$("ul.tabs li:eq(tabnum)").addClass("active").show(); //Activate nth tab
		$(".tab_content:eq(tabnum)").show(); //Show nth tab content
	} else {
		$("ul.tabs li:first").addClass("active").show(); //Activate first tab
		$(".tab_content:first").show(); //Show first tab content
	}

Open in new window

Author

Commented:
Thanks for that :)

Just trying to set the cookie in the onclick function too.

$.cookie('the_tab', value) <- How would I get the selected value (first, second, nth..) into this?

Thanks again for your help..
	//When page loads...;
	$(".tab_content").hide(); //Hide all content

	var tabnum = $.cookie('the_tab')
	if (tabnum !== '') {

// these next 2 lines changed slightly for improved performance in modern browsers using .eq() instead of :eq()

		$("ul.tabs li").eq(tabnum).addClass("active").show(); //Activate nth tab
		$(".tab_content").eq(tabnum).show(); //Show nth tab content
	} else {
		$("ul.tabs li:first").addClass("active").show(); //Activate first tab
		$(".tab_content:first").show(); //Show first tab content
	}

	//On Click Event
	$("ul.tabs li").click(function() {
		alert(this);
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		
		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		
		$(activeTab).fadeIn(); //Fade in the active ID content

// cookie update code

		var index = $("ul.tabs li").index(this);
		$.cookie('the_tab', index);

		return false;
	});

Open in new window

Author

Commented:
Awesome, thanks for your help! Works a treat.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.