学习内容：用layer弹出层做出tab的多个选项卡的设置
<title>layer弹出层使用-tab层</title>
<style type="text/css">
* {
margin:0;padding:0;/*这里是将元素之间外边的间距和内边的间距设为0*/
}/* *星号代表对所有的元素进行css样式设置 */
</style>
<script src="jquery-1.10.2.min.js"></script><!--先导入jquery库-->
<script src="layer/layer.js"></script><!--接着导入layer.js插件-->
<script type="text/javascript">
$(function () {
$("#buttonId").click(function () {
//tab层，即多个选项卡切换内容
layer.tab({
area: ['800px', '500px'],//这是弹出的区域的总宽度和高度
tab: [{
title: '选项卡1',
content: $("#textCon1").html()
//$("#textCon1")是代表id为textCon1的div元素，html()是获取该元素的
//html下的内容
}, {
title: '选项卡2',
content: $("#textCon2").html()
//$("#textCon2")是代表id为textCon2的div元素，html()是获取该元素的
//html下的内容
}, {
title: '选项卡3',
content: $("#textCon3").html()
//$("#textCon3")是代表id为textCon3的div元素，html()是获取该元素的
//html下的内容
}]
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="点击我" id="buttonId" />
<div id="textCon1" style="display:none;">
你好，我是选项卡的内容1
</div>
<div id="textCon2" style="display:none;">
你好，我是选项卡的内容2
</div>
<div id="textCon3" style="display:none;">
你好，我是选项卡的内容3
</div>
</form>