【JQuery：多个页面在同一个div内显示】

适逢加班，中午休息，发个博客，
这是JQuery写的的一个网页布局，就是多个页面在同一个div内显示，
这个是很正常的，不过实现起来还是有点纠结，

（难道我会告诉你：因为我后端 和 android写多了，不会画页面了吗？）

先用御坂 镇楼！

效果：

左侧的导航栏都是 ul + li，一个li对应一个div内容或者 一个jsp页面

jquery插件，随便一个版本，不过为了好看的样式，这里用1.9.2，
里面不仅有jquery.js，还有 2个gecustom，2个jquery-ui.css

<!DOCTYPE html>
<html>
<head>
<title>tabs.html</title>
<!-- tabs:选项卡，一个div显示多个页面 -->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script src="js/jquery.js"></script>
<script src="js/jquery-ui.custom.js"></script> 
<script src="js/jquery-ui.custom.min.js"></script> 

<link type="text/css" href="css/jquery-ui-1.9.2.custom.css" rel="stylesheet">

<style> 
#tabs{ width: 800px; height: 350px; border:1px solid blue; text-align: center; }
p{color:green;}
#left{width: 100px; height: 350px; border:1px solid blue; text-align: center;float:left;}
#right{width: 600px; height: 350px; border:1px solid blue; margin-left:20px; float:left;text-align: center;}

</style>
</head>

<body>

<div id="tabs"> <!-- 这是最大的div，js中需要选择最大的div，否则ul,li标签会失去样式 -->

<div id="left"> <!-- 左侧导航 -->
<ul>
<li><a href="#tab1"> 选项卡1 </a></li>
<li><a href="dialog.html"> 选项卡2 </a></li>

<li><a href="button.html"> 选项卡3 </a></li> <br><br>
<!-- 可以在li里面写超链接，不隐藏也可以。 -->

</ul>
</div>

<!-- 至少需要一个id标记 --> 
<div id="right">
<div id="tab1">第一个选项卡里的内容: <p> 初音</p> </div> 
<!-- 选择内容，第一个需要是标识 -->
<!-- <div id="tab2">第二个选项卡里的内容: <p>初音气~</p> </div>
<div id="tab3">第三个选项卡里的内容: <p>初音未来</p> </div> -->
</div> 


</div> 
<script>
$(function(){
/* 简单版： $("#tabs").tabs(); */
$("#tabs").tabs({
cache:true, //隐藏：启动
});
});

</script> 
</body>
</html>

效果图：

选择2,3是2个不同的 jsp页面，自己选吧