table选项卡

今天给大家讲一个简单实用的table选项卡

以前写选项卡的时候，老是不知道怎么去写；网上去找一大堆的资料，翻来找去的；最后自己写了一个简单的jquery分享给大家；

<style>
* {
	margin:0;
	padding:0;
}
.box{
	margin:auto;
	width:608px;
	height:300px;
	border:1px solid #666;
}
ul{
	width:608px;
	height:50px;
	list-style:none;
}
li{
	float:left;
	width:150px;
	height:50px;
	border:1px solid #999;
	text-align:center;
	line-height:50px;
}
.cont{
	width:150px;
	height:50px;
	float:left;
	position:absolute;
	font-size:20px;
	display:none;
}
.cont1{
	display:block;
}
.cur{
	background-color:#666;
}
</style>

这是我写的css样式。大家可以借鉴一下

<div class="box">
    <ul>
        <li class="cur">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <div class="cont cont1">a</div>
    <div class="cont">b</div>
    <div class="cont">c</div>
    <div class="cont">d</div>
</div>

这个是html

<script>
$(".box ul li").click(function() {
    $(this).addClass("cur").siblings().removeClass("cur");
    $(".cont").eq($(this).index()).show().siblings(".cont").hide()
})
</script>

最后这个是实现的jquery

实现效果图如上；；；