Question

jQuery怎么实现tab页切换效果

Answer 1

简略写的

<style>
	.big{
		width:100px;
	}
	.tabtit ul li.active{
		background:red;
		color:#fff;
	}
	.tabtit ul li:hover{
		background:red;
		color:#fff;
	}
	.tabcon ul li{
		width:100px;
		height:100px;
	}
</style>
<div class="big">
	<div class="tabtit">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>
	<div class="tabcon">
		<ul>
			<li style="background:#007FFF;">1</li>
			<li style="background:#00DD1C;">2</li>
			<li style="background:#9ACD32;">3</li>
		</ul>
	</div>
</div>
<script>
	var titList = $(".tabtit ul li"); //获取选项卡标题
	var contList = $(".tabcon ul li");//获取选项卡切换的内容
	//默认显示第一个选项卡标题
	titList.eq(0).addClass("active").siblings().removeClass("active");
	//默认显示第一个选项卡切换的内容
	contList.eq(0).show().siblings().hide();
	titList.click(function(){
		var titnub = $(this).index(); //获取点击当前标题的index值
		//当前点击的标题添加class，并移除同级的class
		$(this).addClass("active").siblings().removeClass("active");
		//显示相同index值的内容
		contList.eq(titnub).show().siblings().hide();
	})
</script>