用jQuery簡單的實現了table選項卡的功能，有興趣的小夥伴可以瞭解學習一下，

下面介紹程式碼，

使用的語言：html，css，JavaScript，jQuery

html 部分：

		<ul id="ul">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		
		<div id="div">
			<div style="display:block;">1</div>
			<div>2</div>
			<div>3</div>
		</div>
 

簡單的寫了兩個標籤，然後我們給他們加點樣式

css部分：

		ul{
			margin: 0px;
			list-style: none;
			padding: 0px;
			width: 100%;
			height: 50px;
		}
		ul>li{
			padding: 12px 9px;
			border: 1px solid black;
			width: 100px;
			float: left;
			text-align: center;
		}
		#div>div{
			width: 600px;
			height: 400px;
			border: 1px solid black;
			display: none;
		}
 

好啦 ，一個簡單的頁面就構成了，當然，光這些還不夠，我們還需要給他點js；

js部分：

		$(document).ready(function(){
			$("#ul").children("li").each(function(index,element){
				$(this).click(function(){
					$($("#div").children()[index]).css("display","block")
					$($("#div").children()[index]).siblings().css("display","none")
				})
			})
		})
 

好啦 這樣就實現了table選項卡的切換功能，

當然更復雜的切換頁面的選項卡也可以在這個基礎上再寫，這裡就不一一介紹了，有興趣的自己動手試試