jQueryUI的Tabs的使用

来源：互联网发布：suse11 linux 乱码编辑：程序博客网时间：2024/05/14 14:46

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>