jQueryUI的Tabs的使用

jQueryUI的下载: http://jqueryui.com/download

然后在页面中添加对jQuery和jQueryUI的引用

<script type='text/javascript' src='<%=path%>/js/jQuery.js'></script> <script type='text/javascript' src='<%=path%>/js/jQueryUI.js'></script>

加入自己喜欢的或者自定义的css样式

<link type="text/css" rel="stylesheet" href="<%=path%>/css/redmond/jquery-ui-1.8.14.custom.css">
然后在body中添加对应的tab选项的代码:

<div id="tmpTabExample"> <ul> <li><a href="tab1.html" title="tmpTab-1"><span>t1</span></a></li> <li><a href="tab2.html" title="tmpTab-2"><span>t2</span></a></li> <li><a href="#tmpTab-3" title="tmpTab-3"><span>t3</span></a></li> <li><a href="#tmpTab-4" title="tmpTab-4"><span>t4</span></a></li> </ul> <div id="tmpTab-1"> </div> <div id="tmpTab-2"> </div> <div id="tmpTab-3"> tab 3 </div> <div id="tmpTab-4"> tab 4 </div> </div>
其中前两个tab是用ajax的方式加载,请求的是另外的两个网页的内容

后两个就是普通的tab.

最后就是通过js代码启用tab功能

<script type="text/javascript"> $(document).ready( function() { jQuery('#tmpTabExample').tabs(); } ); </script>