示例圖：
先下載
jquery-1.7.1.min.js和
js/jquery-ui-1.7.3.custom/development-bundle/ui/ui.tabs.js和js/jquery-ui-1.7.3.custom/development-bundle/ui/ui.accordion.js
然後把它拖到項目中，記得jquery-1.7.1.min.js導入項目必須在最前面。否則顯示不了效果
<head runat="server">
<title>Jquery UI</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.3.custom/development-bundle/ui/ui.tabs.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.3.custom/development-bundle/ui/ui.accordion.js" type="text/javascript"></script>
<link href="js/jquery-ui-1.7.3.custom/development-bundle/themes/base/ui.all.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#tabDiv").tabs({event:"mouseover"});//鼠標浮動事件 選項卡
})
</script>
<script type="text/javascript">
$(function () {
$("#divAcc1").accordion({ autoHeight: false, collapsible: true, event: "mouseover" });//鼠標浮動事件，摺疊菜單，autoHeight爲false 不爲默認高
$("#div1").accordion({ autoHeight: false, icons: {header:"ui-icon-circle-arrow-e"},event:"mouseover" })
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="tabDiv" style=" width:400px; font-size:12px;">//選項卡的開始
<ul>//必須包含ul
<li><a href="#tabDiv1_1">這是第一個選項卡</a></li>//選項卡中的子項這裏的a標籤中的 href必須指向子項中的id
<li><a href="#tabDiv1_2">這是第二個選項卡</a></li>
<li><a href="#tabDiv1_3">這是第三個選項卡</a></li>
</ul>
<div id="tabDiv1_1"><p>第一個選項卡的內容</p><a href="#">測試</a></div>//每個子項中的內容 注意這裏的id是被上面a標籤引用的
<div id="tabDiv1_2"><p>第二個選項卡的內容</p></div>
<div id="tabDiv1_3"><p>第三個選項卡的內容</p></div>
</div>//選項卡的結束
<div style=" width:300px; float:left; margin-left:20px">
<div id="divAcc1">//摺疊菜單的開始
<h3> divAcc1菜單</h3>//這是摺疊的第一個頭部
<div>菜單1的內容1<br />菜單1的內容3<br />菜單1的內容2<br /></div>//對應上的頭部，
<h3> divAcc2菜單</h3>//這是摺疊的第二個頭部
<div>菜單2的內容1<br />菜單2的內容2<br /></div>
<h3> divAcc3菜單</h3>//這是摺疊的第三個頭部
<div>菜單3的內容<br />菜單3的內容<br /></div>
</div>
</div>//摺疊菜單的結束
<br /><br />
<div style=" width:300px; float:left; margin-left:20px">
<div id="div1">
<h3> divAcc1菜單</h3>
<div>菜單1的內容1<br />菜單1的內容3<br />菜單1的內容2<br /></div>
<h3> divAcc2菜單</h3>
<div>菜單2的內容1<br />菜單2的內容2<br /></div>
<h3> divAcc3菜單</h3>
<div>菜單3的內容<br />菜單3的內容<br /></div>
</div>
</div>
</form>
</body>
</html>
====================如有錯誤，請多多指教==========================
-----------------------------待續 ehtan-----------------------------------