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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " URl BLOCKED ">
<html xmlns="URL BLOCKED">
<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.