tabs.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery對話框</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-ui-1.9.2/themes/base/jquery.ui.all.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-ui-1.9.2/ui/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$("#tabs").tabs({
//ajaxOptions:{}, //在tab內容載入時額外需要的Ajax選項
cache:false, //是否緩存遠程tab內容，默認爲false
event:"click", //切換條件，也可以設爲mouseover，hover
collapsible:true, //再次點擊，可摺疊選項卡
collapsible:true, //設置爲true時將設置一個選中的tab再此被選中時執行反選操作
fx:{ opacity: 'toggle'}, //在隱藏或者顯示面板的時候開啓動畫
selected:0, //從0開始的序列值,設置第幾個tab將在初始化時被選中. 設置爲-1則不選中所有tab.
beforeLoad:function(event,ui){
//當遠程加載失敗時加載的函數
ui.jqXHR.error(function(){
ui.panel.html("暫時不能加載內容...");
});
},
//這個事件在點擊一個tab的時候觸發
select:function(event,ui){
}
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">第一項</a></li>
<li><a href="#tabs-2">第二項</a></li>
<li><a href="ajax_test1.jsp">第三項</a></li>
</ul>
<div id="tabs-1">
<p>第一項標題</p>
<p>第一項具體內容</p>
</div>
<div id="tabs-2">
<p>第二項標題</p>
<p>第二項標題</p>
</div>
</div>
</body>
</html>
ajax_test1.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String result = "Ajax測試內容";
out.print(result);
%>