jQuery ---
jQuery UI ， ” ”， ， ， ， ， ， 。
1．
（1）collapsible ， ， true， ， ， ， false。
（2）disable
（3）event ， ”click”， ，
（5）fx
（6） index
2. html ， ：
<body>
<div>
<div>
<h1> </h1>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1"> </div>
<div id="tabs-2"> </div>
<div id="tabs-3">N </div>
</div>
</div>
</div>
</body>
3. js ，
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">
<script type="text/javascript">
<script type="text/javascript">
//
$(document).ready(function(){
$('#tabs').tabs({
collapsible:true,
selected:1,// 1 0
event:"mouseover",
//
fx:{
opacity:"toggle",// show fadeIn,toggle opacity:0.2 0.2 ， 0-1,1
height:"toggle" //
},
disabled:[1,2], //1 2
});
//
$('#tabs').tabs("url",2,"tab5.jsp");
//
$('#tabs').tabs("add","tab5.jsp","four");
//
$('#tabs').tabs("remove",1);
});
</script>
html ：
<li><a href="${pageContext.request.contextPath}/tabs/tab4.jsp">4</a></li>
ajax
：