<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab选项卡功能的实现</title>
<style type="text/css">
body{ font-size:12px; }
ul{ margin:0px; padding:0px; list-style:none; }
#title li{ float:left; width:80px; height:40px; line-height:40px; text-align:center; border:1px solid #f00; cursor:pointer; margin-right:5px;}
#title li.hover{ background-color:#CCC; color:#fff }
#main li img{ width:500px; height:300px; }
#main li{ display:none; }
#main li.hover{ display:block; }
.clear{ clear:both; }
</style>
<script type="text/javascript" src="http://www.aspbc.com/js/jquery.js" ></script>
<script type="text/javascript">
/*
jquery Tab选项卡功能的实现
来源：www.aspbc.com
作者：wangsdong
原创文章，转载请注明来源，谢谢
*/
$(function(){
$("#title > li").each(function(index){
$(this).bind('click',function(){
$(this).addClass('hover').siblings().removeClass('hover');
$('#main').find('li').eq(index).addClass('hover').siblings().removeClass('hover');
});
});
});
</script>
</head>
<body>
<ul id="title">
<li class="hover">标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<div class="clear"></div>
<ul id="main">
<li class="hover"><img src="a.jpg"/></li>
<li><img src="b.jpg" /></li>
<li><img src="c.jpg" /></li>
</ul>
</body>
</html>