jQuery选项卡插件

<ul id="tabs" class="tabs">
<li data-tab="users">Users</li>
<li data-tab="groups">Groups</li>
</ul>
<div id="tabsContent" class="tabsContent">
<div data-tab="users" class="tab-item"> item1 </div>
<div data-tab="groups" class="tab-item"> item2 </div>
</div>

.tabs{
width:500px;
height:30px;
background:#eee;
}
.tabs li{
float:left;
width:250px;
font:18px/30px "Microsoft YaHei";
color:#333;
text-align: center;
cursor: pointer;
}
.tabs li.active{
background:#0aa;
}.tabsContent{
width:498px;
border:1px solid #888;
}
.tabsContent .tab-item{
height:250px;
width:100%;
font-size: 45px;
display: none;
}
.tabsContent .active{
display: block;
}

(function ($) { /*
* jquery tabs 插件
*/
$.fn.tabs = function (control) { var $element = $(this), // 切换的触点 li => tabs
$control = $(control); // 切换的内容 tab-item => tabsContent // 委托li的点击事件
$element.delegate("li", "click", function () {
// li 对应的 data-tab属性值
var tabName = $(this).attr("data-tab"); $element.trigger("change.tab", tabName);
}); // change.tab 第一步：改变li.active
$element.bind("change.tab", function (e, tabName) {
$element.find("[data-tab]").removeClass("active");
$element.find("[data-tab="+ tabName +"]").addClass("active");
}); // change.tab 第二步：改变tab-item.active
$element.bind("change.tab", function (e, tabName) {
$control.find("[data-tab]").removeClass("active");
$control.find("[data-tab="+ tabName +"]").addClass("active");
}); // 激活第一个选项卡
$element.trigger("change.tab", $element.find("li:first").attr("data-tab")); return this; // 返回链式调用
};
})(jQuery);// 基本示例
$("#tabs").tabs("#tabsContent");/*
* 应用扩展
* 切换时将tabName写入hash
* 当hashchange的时候触发tabs切换
*/
// 当切换的时候，把tabName写入hash
$("#tabs").bind("change.tab", function (e, tabName) {
location.hash = tabName;
});// 目前除了 ie67 外都原生支持 hashchange 事件
$(window).bind("hashchange", function () {
var tabName = location.hash.slice(1);
$("#tabs").trigger("change.tab", tabName);
});