<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);});