JQuery-Tab选项卡

<div class="tab">
	<div class="tab-btn   TabBtn">
		<ul>
			<li class="btn-on"><a href="javascript:void(0)">选项卡一</a></li>
			<li><a href="javascript:void(0)">选项卡二</a></li>
		</ul>
	</div>
	<div class="tab-items TabItems">
		<div class="tab-item"><p>这是选项卡一的内容</p></div>
		<div class="tab-item"><p>这是选项卡二的内容，字数比较多</p></div>
	</div>
</div>

<style type="text/css" media="screen">
	*{ margin: 0; padding: 0; }
	ol,ul li{ list-style: none; }
	a{ color: #000; text-decoration: none; }
	img{ border: none; }



	.tab{
		width: 300px;
		height: 300px;
		overflow: hidden;
		border: 1px solid #f5f5f5; 
	}

	.tab-btn{
		height: 30px;
		line-height: 30px;
		background-color: #f5f5f5;
	}
	
	.tab-btn ul{
		overflow: hidden;
	}

	.tab-btn ul li{
		width: 100px;
		text-align: center;
		font-size: 16px;
		text-align: center;
		float: left;
	}
	
	.tab-btn ul li a{
		color: #000;
	}
	
	.tab-btn  .btn-on{
		background-color: #b9b9b9;
	}

	.tab-items{
		height: 270px;
	}
	
	.tab-item{
		text-align: center;
		height: 270px;
	}

</style>

<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$(".TabBtn ul li").mouseover(function() {
			//移入按钮添加选中效果,同级的移除。
			$(this).addClass('btn-on').siblings('li').removeClass('btn-on');
			//将其索引值放在变量i中，
			var i = $(this).index();
			//确保索引正确
			//console.log(i); 
			//内容子元素获取到i的显示，没有获取到的隐藏，
			$(".TabItems").children('.tab-item').eq(i).show().siblings().hide();
		});
	})
</script>