闲来无事，周末用jQuery写了一个比较精简的Tabs，个别地方可以用到。
截图及代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>tab test</title>
<style type="text/css">
*{padding:0;margin:0;}
ul,li{list-style-type:none;}
.hide{display:none;}
.show{display:block;}
#tabs{width:300px;margin:50px auto 0;}
#tabs .mt{height:25px;zoom:1;}
#tabs .mt:after{content:'\20';display:block;clear:both;}
#tabs .mt .tit{float:left;height:18px;padding:3px 15px;border:1px solid #ddd;border-radius:5px 5px 0 0;margin-right:5px;background:#eee;line-height:18px;text-align:center;cursor:pointer;color:#666;}
#tabs .mt .curr{position:relative;z-index:1;height:19px;border-color:#ccc;border-bottom:none;background:#fff;color:#333;}
#tabs .con{height:120px;padding:10px;border:1px solid #ddd;border-radius:0 5px 5px 5px;}
</style>
<script type="text/javascript" src="js/jquery-1.6.4-min.js"></script>
</head>
<body>
<div id="tabs" class="m">
<div class="mt">
<ul>
<li class="tit curr">tab1</li>
<li class="tit">tab2</li>
<li class="tit">tab3</li>
</ul>
</div>
<div class="mc">
<div id="con1" class="con">内容1</div>
<div class="con hide">内容2</div>
<div class="con hide">内容3</div>
</div>
</div>
<script type="text/javascript">
(function(){
var $tit = $("#tabs .tit"),$con = $("#tabs .con");
$tit.click(function(){
var index = $tit.index($(this));
$(this).addClass("curr").siblings().removeClass("curr");
$con.addClass("hide");
$($con.get(index)).removeClass("hide");
})
})();
</script>
</body>
</html>