效果图:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/ligerUi/ligerui.min.js"></script>
<script type="text/javascript" src="../js/ligerUi/ligerTab.js"></script>
<link rel="stylesheet" href="../css/skins/Aqua/css/ligerui-all.css" />
<script>
$(function() {
$('#tab').ligerTab({
//showSwitchInTab: true,
//showSwitch: true,
width : 300,
//没有该属性,但不报错
height : 600,
//这个方法是选中tab后进行的操作
onAfterSelectTabItem : function(tabid) {
if (tabid == 'tab1') { //第一个div进行的操作,如数据加载
//alert(11111111111) ;
}
if (tabid == 'tab2') { //第二个div进行的操作,如数据加载
// alert(22222222222) ;
}
}
});
});
</script>
</head>
<body>
<div id="tab">
<div title="tab1" tabid='tab1'>
<div>1111111111111111111</div>
</div>
<div title="tab2" tabid='tab2'>
<div>22222222222222222</div>
</div>
<div title="tab3" tabid='tab3'>
<div>333333333333333333</div>
</div>
</div>
</body>
</html>