jQuery选项卡插件

浏览数：16 / 时间：2015年06月09日

html结构

<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>

css样式

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

js脚本

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