jQuery的tabs

// 导入指定样式
<link rel="stylesheet" type="text/css" href="..easyui.css">

// 给div标签加样式easyui-tabs，变成选项卡
<div id="tabs" style=".." class=”easyui-tabs”>
    // 给选项卡内添加四个面板
    <div title="tab1" style=".."></div>
    <div title="tab2" style=".."></div>
    <div title="tab3" style=".."></div>
    <div title="tab4" style=".."></div>
</div>

// 选项卡的内容在触发onselect事件时由脚本生成，并填入指定的面板
$("#tabs").tabs({
    // 是否显示选项卡的边框
    border : false, 
    // 一个导航控件，不详述
    justified : true, 
    // 初始选项卡要显示的面板索引，索引从0开始，默认0
    selected : 0, 
    // 用户在选择选项卡的某个面板时触发，参数为面板的标题和索引
    onSelect : function(title, index) {
        // 获取被选中的面板句柄
        var tab = $('#tabs').tabs('getSelected');
        // 更新选项卡的内容
        $('#tabs').tabs('update', {
            // 要更新的面板
            tab : tab, 
            options : {
                // 从远程加载面板内容，请求一个控制器，响应一个vm，渲染一个网页返回，填充到面板
                href : '/site/task/tasktab?tab='+index
            }
        });
    }
});