2009 Module Rework in jQuery

index.html

<div class="tip_box">
<ul class="tabs">
    	<li>
	    	<a href="#tab1"><h6>tutoring</h6></a>
	  	</li>
	  	<li>
	    	<a href="#tab2"><h6>discussions</h6></a>
	 	</li>
	  	<li>
			<a href="#tab3"><h6>workshops</h6></a>
		</li>
	</ul>
	
	<div id="tab1">
   		<a href="http://google.com" target="_blank"><img alt="tutoring" src="http://rjlewis.me/client/westwood/assets/tutoring.gif" name="tutoring" id="pic" /></a>
	</div>
	<div id="tab2">
		<a href="http://amazon.com" target="_blank"><img alt="discussions" src="http://rjlewis.me/client/westwood/assets/discussion.gif" name="discussions" id="pic" /></a>
	</div>
	<div id="tab3">
		<a href="http://apple.com" target="_blank"><img alt="workshops" src="http://rjlewis.me/client/westwood/assets/workshops.gif" name="workshops" id="pic" /></a>
	</div>
</div>

script.js

$(function () { 
  set_tab();
});
  
var i=0;
var tablength=0;

//sets initial tab and set value for increment
function set_tab() {
	$('ul.tabs').each(function () {
		var $tab = $(this).find('a');
		var $selected = $($tab[i]);
		
		$tab.removeClass('selected');
		$selected.addClass('selected');
		$content = $($selected.attr('href')).show();
		
		$tab.not($selected).each(function () {
			$($(this).attr('href')).hide();
		});
		
		enable_click ($tab, $selected, $content);
		$(tablength=$tab.length);

	});
}

//start increment
var timerID=setInterval(change_tab, 7000);	

function change_tab () {
	if (i<tablength-1) {
		i++;
	} else {
		i=0;
	}
	
	set_tab(i);
}

//set tabs clickable
function enable_click ($tab, $selected, $content) {
	$tab.click(function (e) {
		
		$selected.removeClass('selected');
		$content.hide();
		$selected = $(this);
		$content = $($(this).attr('href'));
				
		$selected.addClass('selected');
			clearInterval(timerID);
			var current = $('.selected');
			var reset = $('ul.tabs li a').index(current);
			i=reset;
			timerID=setInterval(change_tab, 7000);
			
		$content.show();
				
		e.preventDefault();
	});
}

style.css

/* @group global*/

a:link{
  text-decoration: none;
	border: none;	
}

.tip_box {
	position: relative;
	width: 400px;
	height: 300px;
	padding: 0;
}
/* @end global */

/* @group tabs */

ul.tabs {
	margin: 0px auto 0px -40px;	
	margin-top: 2px;
}

ul.tabs li {
	list-style: none;
	float: left;
	display: inline;
}

ul.tabs li a h6 {
	color: #fffeff;
	background-color: #00457e;
	border: 2px solid #0871bb;
	position: relative;
	padding: 2px 0 2px 2px;
	width: 82px;
	text-align: center;
	margin: 0 2px 0 0px;
	font: bold 13px "Lucida Grande", Lucida, Verdana, sans-serif;
	float: left;
	display: inline;
	
	border-top-left-radius:.5em .5em; 
	-webkit-border-top-left-radius:.5em .5em; 
	-o-border-top-left-radius:.5em .5em; 
	-moz-border-radius-topleft:.5em .5em; 
	
	border-top-right-radius:.5em .5em; 
	-webkit-border-top-right-radius:.5em .5em; 
	-o-border-top-right-radius:.5em .5em; 
	-moz-border-radius-topright:.5em .5em; 
}

.tips ul li a:hover h6 {
	position: relative;
	padding: 2px 0 2px 2px;
	width: 82px;
	text-align: center;
	margin: 0 2px 0 0px;
	font: bold 13px "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #fffeff;
	background-color: #5d91c0;
	border: 2px solid #72b3ed;
	float: left;
	display: inline;
}

ul.tabs li a.selected h6 {
	color: #fffeff;
	background-color: #5d91c0;
	border: 2px solid #72b3ed;
}
/* @end tabs */