這是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頁面,自己選吧