JQuery 实现选项卡效果

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/ui.core.js"></script>
<script type="text/javascript" src="javascript/ui.tabs.js"></script>

  var tab;
   jQuery(document).ready(function(){
     //初始状态#workDiv > ul处于隐藏，此时使其显示，避免页面过渡现象出现
	jQuery("#workDiv > ul").css("display","");
	//产生tab标签
    	tab=jQuery("#workDiv > ul").tabs();
    	//使子信息标签不可用
    	//tab.tabs('disable', 1);
  	});

<br>
<div id="selectDiv" class=""> 
   <ul style="display:none">
    <li>
    	<a href="#iframe-1"><span>选项卡1</span></a>
    </li>
    <li>
    	<a href="#iframe-2"><span>选项卡2</span></a>
    </li>
    <li>
    	<a href="#iframe-3"><span>选项卡3</span></a>
    </li>
   </ul>
   <div id="iframe-1" >
    	<iframe src="1.html" frameborder="0" style="width: 100%"></iframe>
    </div>
    <div id="iframe-2" >
    	<iframe src="2.html" frameborder="0" style="width: 100%;height: 30%"></iframe>
    </div>
    <div id="iframe-3" >
    	<iframe src="3.html" frameborder="0" style="width: 100%"></iframe>
    </div>
</div>