用jQuery 实现table选项卡功能

用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选项卡的切换功能，

当然更复杂的切换页面的选项卡也可以在这个基础上再写，这里就不一一介绍了，有兴趣的自己动手试试