EasyUI的选项卡相比用纯粹的javascript来做要简单的多。
<!DOCTYPE html>我的my.js文件：
<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>
$(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);
}
});
});