JavaScript Forum

**bloggerious** · 01-06-2010, 01:14 PM

A jQuery noob here.

I've found a jQuery tab script that can set up multiple tab sets however I need the ability to remember which last tab I clicked so that when I refresh the page, it will still be active. I read about the jQuery cookie plugin but I don't understand how to implement it.

I badly need this functionality (jQuery cookie plugin) to be added in the existing code below. It will be use for my personal site. I only know HTML and a little in CSS.

Below is the code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Tabs</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$.fn.myTabs = function() {
		$(this).find('.tab_content').hide();
		$(this).find('.tab li:first').addClass('active').show();
		$(this).find('.tab_content:first').show();
		
		$('.tab li').click(function() {
			$(this).parent().parent().parent().find('.tab li').removeClass('active');
			$(this).addClass('active');			
			$(this).parent().parent().parent().find('.tab_content').hide();
			var activeTab = $(this).find('a').attr('href');
			$(activeTab).show();
			return false;
		});
	};
	$("div[class^='my_tabs']").myTabs();
});
</script>
</head>
<body>
<div class="my_tabs">
	<div class="tab">
		<ul class="clearfix">
			<li><a href="#comments"><span>Latest Comments</span></a></li>
			<li><a href="#popular"><span>Recently Popular</span></a></li>
			<li><a href="#tags"><span>Tag Cloud</span></a></li>
		</ul>
	</div>
	<div class="box">
		<div class="tab_content" id="comments">
			Latest Comments Content
		</div>		
		<div class="tab_content" id="popular">
			Popular Content
		</div>
		<div class="tab_content" id="tags">
			Tag Cloud Content
		</div>
	</div>
</div>
<br />
<div class="my_tabs">
	<div class="tab">
		<ul class="clearfix">
			<li><a href="#tab1"><span>Tab 1</span></a></li>
			<li><a href="#tab2"><span>Tab 2</span></a></li>
			<li><a href="#tab3"><span>Tab 3</span></a></li>
		</ul>
	</div>
	<div class="box">
		<div class="tab_content" id="tab1">
			Tab One Content
		</div>		
		<div class="tab_content" id="tab2">
			Tab Two Content
		</div>
		<div class="tab_content" id="tab3">
			Tab Three Content
		</div>
	</div>
</div>
</body>
</html>

I appreciate any kind of help.

**bloggerious** · 01-10-2010, 11:23 AM

Anyone willing to help?

**wayfarer07** · 01-10-2010, 01:32 PM

Do you have a specific question? It is difficult to explain jQuery if you don't understand CSS well and have never programmed.

**bloggerious** · 01-10-2010, 07:16 PM

My question is how to modify the code I posted so that it will remember the last Tab I clicked.

For example, if I have Tab1, Tab 2, Tab 3. When I click Tab 3 and refresh the page, it will go back to the default Tab 1 which is not what I want. I want that it will still be the Tab 3 that should be active even if I refresh the page.

**webcosmo** · 01-10-2010, 11:04 PM

Quote:

Originally Posted by bloggerious

My question is how to modify the code I posted so that it will remember the last Tab I clicked.

For example, if I have Tab1, Tab 2, Tab 3. When I click Tab 3 and refresh the page, it will go back to the default Tab 1 which is not what I want. I want that it will still be the Tab 3 that should be active even if I refresh the page.

on that case you may use a session or you can redirect to the url with a different querystring for each tab.

**wayfarer07** · 01-11-2010, 08:33 AM

There's no URL from what I can tell that will open the tab, it is an event based, from a click event. If this is the case, you could place the number of the tab into the cookie, then use jQuery's click() function to create a click instead of setting an event with it.

This assumes that there is a variable called cookie that you've populated with this data:

Code:

if(typeof cookie != "undefined") {
    $(".tab li").eq(cookie).click();//
}

This would have to be the last thing on the page, and you will have to find a way to put a number into a cookie (starting with zero for the first tab, not one), every time a tab is clicked on. It shouldn't be hard.