jQuery UIでタブ

javascript 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/overcast/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){

				// Tabs
				$('#tabs').tabs();

				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); },
					function() { $(this).removeClass('ui-state-hover'); }
				);

			});
		</script>
		<style type="text/css">
			/*demo page css*/
			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
			.demoHeaders { margin-top: 2em; }
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
		</style>
	</head>
	<body>
	<h1>jQuery Tab</h1>
		<!-- Tabs -->
		<h2 class="demoHeaders">Tabs</h2>
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">First</a></li>
				<li><a href="#tabs-2">Second</a></li>
				<li><a href="#tabs-3">Third</a></li>
				<li><a href="#tabs-4">fourth</a></li>
				<li><a href="#tabs-5">fifth</a></li>
			</ul>
			<div id="tabs-1">タブ１の内容です</div>
			<div id="tabs-2">タブ２の内容です</div>
			<div id="tabs-3">タブ３の内容です</div>
			<div id="tabs-4">タブ４の内容です</div>
			<div id="tabs-5">タブ５の内容です</div>
		</div>


	</body>
</html>

hoverしたとき、外れたときにclassを取り外ししてるだけ。
単純なロジックでできてます。