EasyUI的选项卡相比用纯粹的javascript来做要简单的多。
<!DOCTYPE html> <html> <head> <title>面板组件</title> <meta charset="utf-8"> <!--需要引入的文件（包括自己的文件，一定要把自己的放到最后！）--> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /> <script type="text/javascript" src="./js/my.js"></script> </head> <body> <div id="box" style="width: 500px; height: 300px;"> <div title="tab1">tab111111------</div> <div title="tab2">tab222222------</div> <div title="tab3">tab333333------</div> </div> <div id="tt"> <a href="#???"></a> </div> </body> </html>我的my.js文件：
$(function(){
$("#box").tabs({
height: 400,
width: 300,
// plain: true,//不要背景
// fit: false,//全屏
// // border: false,//不要边框
// // tabWidth: 300,
// // tabHeight:,
// // scrollIncrement: 50,
// // scrollDuration: 1000,
// tools: [{
// iconCls: 'icon-add',
// handler: function(){
// alert("ADD增加");
// }
// },{}],
// tools: '';
// toolPosition: 'left',
// tabPosition: 'left',
// selected: 1,
onSelect: function(title,index){
alert(title+"------"+index);
},
onContextMenu: function(e,title,index){
alert(e.type+"|"+title+"|"+index);
}
});
});原文地址：http://blog.csdn.net/mycodedream/article/details/45011437
