Jquery实现的Tabs页

前段时间做一个项目，其中界面部分要用到的tabs页签网上已经有很多很多现成的可以用，也用了下jquery-ui里面的tabs，感觉大了点，自己的需求并不复杂，还是自己动手写写吧，目的为了让html更干净点。

纯属记录自己写的东西，先来个图
[img]http://dl.iteye.com/upload/attachment/0078/4591/5360bec1-cccc-3225-a3cf-eb509dd9cfe2.jpg[/img]


<div class="tabs">
<ul id="tabs">
<li class="tab-nav">管理导航</li>
<li class="tab-nav-action">系统设置</li>
<li class="tab-nav">用户管理</li>
<li class="tab-nav">内容管理</li>
<li class="tab-nav">其他管理</li>
</ul>
</div>
<div id="tabs-body" class="tabs-body">
<div style="display:block">
1111111
</div>
<div style="display:none">
222222222
</div>
<div style="display:none">
33333333333
</div>
<div style="display:none">
4444444444
</div>
<div style="display:none">
555555555555555
</div>
</div>
　　样式

?.tabs {
float:left;
background-image: url(themes/images/nav_bg.jpg);
width:100%;
}
.tabs ul
{
list-style: none outside none;
margin: 0;
padding: 0;
}
.tabs ul li
{
float: left;
line-height: 24px;
margin: 0;
padding: 2px 20px 0 15px;
}
.tab-nav{
background: url(themes/images/manage_r2_c14.jpg) no-repeat;
cursor:pointer;
}
.tab-nav-action{
background: url(themes/images/manage_r2_c13.jpg) no-repeat;
cursor:pointer;
}
.tabs-body
{
border-bottom: 1px solid #B4C9C6;
border-left: 1px solid #B4C9C6;
border-right: 1px solid #B4C9C6;
float: left;
padding: 5px 0 0;
width: 100%;
}
.tabs-body div
{
padding:10px;
}
　　jquery代码

?<script type="text/javascript">
$(document).ready(function () {
$("#tabs li").bind("click", function () {
var index = $(this).index();
var divs = $("#tabs-body > div");
$(this).parent().children("li").attr("class", "tab-nav");//将所有选项置为未选中
$(this).attr("class", "tab-nav-action"); //设置当前选中项为选中样式
divs.hide();//隐藏所有选中项内容
divs.eq(index).show(); //显示选中项对应内容
});

});
</script>

简简单单，效果就达到了

[b]//tabs插件-小色帝稍作改进 [/b]
(function ($) {
$.fn.extend({
qmTabs: function () {
var aTabBodys = $('#tabs-body > div');
$(this).children("li").each(function (index) {
$(this).click(function () {
$(this).removeClass().addClass('tab-nav-action').siblings().removeClass().addClass('tab-nav');
aTabBodys.hide().eq(index).show();
});
});
}
});
})(jQuery);

使用方式
$(document).ready(function () {
$("#tabs").qmTabs();
});