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>