jquery tabs 学习笔记

测试案例

<div id="tabs">
	<ul>
		<li><a href="#tab1">one</a></li>
		<li><a href="#tab2">two</a></li>
		<li><a href="#tab3">three</a></li>
	</ul>
	<div id="tab1">
	 hello one	
	</div>
	<div id="tab2">
	 hello two	
	</div>
	<div id="tab3">
	 hello three	
	</div>
</div>
<div class="btn">button</div>

触发tabs标签事件：

<script>
	  $(document).ready(function() {
		$(".btn").button();
		//获取tab标签的标题，内容
		$(".btn").click(function(){
			var str="";
			var index=$("#tabs").tabs("option","selected");
			var tab=$("#tabs li:eq("+index+")");
			str=tab.text()+"\n";
			var content=$(tab.children().first().attr("href"));
			str+=content.html();
			alert(str);
		});
	    $("#tabs").tabs();
	    //tab标签触发事件
	    $("#tabs").tabs({
	    	select:function(event,ui){
	    		var str="tab:"+ui.tab+"\n";
	    		str+="panel:"+ui.panel+"\n";
	    		str+="index:"+ui.index+"\n";
	    		alert(str);
	    	}
	    });
	    
	  });
  </script>








ajax tab
$(document).ready(function() {
		
		  $('#tabs').tabs({
			    load: function(event, ui) {
			        $(ui.panel).delegate('a', 'click', function(event) {
			            $(ui.panel).load(this.href);
			            event.preventDefault();
			        });
			    }
			});
	  });
	    

<div id="tabs">
	<ul>
		<li><a href="/jsp/test/jquery/tab21.html"><span>one</span></a></li>
		<li><a href="/test/tab2.do"><span>two</span></a></li>
		<li><a href="/jsp/test/jquery/tab23.jsp"><span>three</span></a></li>
	</ul>
</div>