效果图:

ligerTab简单例子_javascript

 

 

<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>