条件，引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js。
一、自动完成 http://www.w3cschool.cc/jqueryui/example-autocomplete.html
var availableTags = [
"ActionScript",
"AppleScript"];
$( "#mytags" ).autocomplete({
source: availableTags
});
<div class="ui-widget">
<label for="tags">标签：</label>
<input id="mytags">
</div>
二、折叠面板 http://www.w3cschool.cc/jqueryui/example-accordion.html
<script> $(function() { $( "#accordion" ).accordion(); }); </script> <div id="accordion"> <h3>部分 1</h3> <div> <p>hello，我是第一段。 </p> </div> <h3>部分 1</h3> <div> <p>hello，我是第er段。 </p> </div> <h3>部分 1</h3> <div> <p>hello，我是第三段。 </p> </div> </div>
三、标签页切换 http://www.w3cschool.cc/jqueryui/example-tabs.html
<script> $(function() { $( "#tabs" ).tabs(); }); </script> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>第一</p> </div> <div id="tabs-2"> <p>第二</p> </div> <div id="tabs-3"> <p>第三</p> <p>还是第三</p> </div> </div>
四、标签页的排序： http://www.w3cschool.cc/try/tryit.php?filename=jqueryui-example-tabs-sortable
五、标签页的动态添加 http://www.w3cschool.cc/try/tryit.php?filename=jqueryui-example-tabs-manipulation
原文：http://www.cnblogs.com/camelroyu/p/4174668.html