jquery ui tabs（选项卡）插件

参考文档：http://www.css88.com/jquery-ui-api/tabs/

html代码：

<div id="tabs">
    <ul>
        <li id="tab1Li"><a href="tab1.html">tab1</a></li>   <!--tab1使用ajax引入，tabs（）可以自己调用ajax方法-->
        <li><a href="#tab2">tab2</a></li>
        <li><a href="#tab3">tab3</a></li>
    </ul>
    <!-- <div id="tab1">tab1-content</div> -->
    <div id="tab2">tab2-content</div>
    <div id="tab3">tab3-content</div>
</div>

js代码：

$("#tabs").tabs({
    collapsible : true,  //当设置为 true时，激活的面板可以被关闭
    disabled : false,  //Boolean or Array: 一个数组。包含从零开始计数的应该禁用选项卡的索引，例如，[ 0, 2 ]将禁用第一和第三个选项卡。
    event : "click",  //激活选项卡的事件类型。 要悬停（hover）激活选项卡，用"mouseover"。
    active : 0,  //Boolean:设置 active 为 false 将折叠所有的panel（面板）。这要求 collapsible 选项必须为 true。
                  //Integer: 激活打开的panel（面板）索引，以零为基础。负值则表示从最后一个panel（面板）后退选择panel（面板）。
    heightStyle : "content",       //"auto": 所有的panel（面板）将会被设置为最高的panel（面板）的高度。    
                                //"fill": 基于 tabs 的父元素的高度，扩展到可用的高度。
                                //"content": 每个panel（面板）的高度取决于它的内容。
    //hide : { effect: "blind", duration: 1000 }, 
    //show : { effect: "blind", duration: 1000 }, 
    create : function(event, ui){   //当创建 tabs（选项卡) 时触发。如果 tabs（选项卡) 是关闭的，ui.tab 和 ui.panel 将是空的 jQuery 对象。
        //alert("新建一个活动卡时触发");
        //alert(ui.tab.html());
        //alert(ui.panel.html());
    },
    activate : function(event, ui){ 
        //alert("切换到一个活动卡时触发");
        //alert(ui.newTab.html());  //刚被激活的选项卡。
        //alert(ui.oldTab.html());  //刚被取消激活的选项卡。
        //alert(ui.newPanel.html());  //刚被激活的面板。
        //alert(ui.oldPanel.html());  //刚被取消激活的面板。
    },
    beforeActivate : function(event, ui){ 
        //alert("切换到一个活动卡之前触发");
        //alert(ui.newTab.html());  //刚被激活的选项卡。
        //alert(ui.oldTab.html());  //刚被取消激活的选项卡。
        //alert(ui.newPanel.html());  //刚被激活的面板。
        //alert(ui.oldPanel.html());  //刚被取消激活的面板。
    },
    load : function (event, ui){    //远程ajax选项卡加载后触发该事件
        //alert(ui.tab.html());       //ui包含 tab 和 panel 两个属性
        //alert(ui.panel.html());
    },
    beforeLoad : function(event, ui){
        //alert("一个远程选项卡被加载之前触发");
        //alert(ui.tab.html());        //属性一：tab
        //alert(ui.panel.html());   //属性二：panel,加载之前为空  
        ui.jqXHR.success(function(responseText,statusText){  //属性三：jqXHR，被请求内容的 jqXHR 对象
            //alert(responseText);
            //alert(statusText);
        });   
        //ui.ajaxSettings.url = "url地址";  //属性三：ajaxSettings，用于由jQuery.ajax请求内容的设置。
    },
});
    //tabs方法
    //$("#tabs").tabs("disable");  //禁用所有tabs
    //$("#tabs").tabs("disable", 0);  //禁用第一个tab
    //$("#tabs").tabs("enable");   //启用tab
    //$("#tabs").tabs("enable", 0);  //启用第一个tab
    $("#tab1Li").click(function() {
        $("#tabs").tabs("load", 0);  //当点击选项时，重新加载远程选项卡的面板内容
    });

实现效果：

转载于:https://www.cnblogs.com/forfly/p/7473426.html