jquery TAB 切换

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.js"></script>

引入jq

<style type="text/css">
	.qiehuantab{
		border:1px solid #ededed;
		color:#000000;
	}
	.bianse{
		background:#007fff;
		color:#FFFFFF;
		border:none;
	}
	//1.
	<!--1.-->
	.qiehuan{
		display:none;
	}
	.xianshi{
		display:block;
	}
	//2.
	<!--2.-->
	.qiehuan{
		display:none;
	}
	.qiehuan:first-child{
		display:block;
	}
	
</style>

样式仅供参考

<!--tab-->
<div class="">
	<span class="qiehuantab" >tab1</span>
	<span class="qiehuantab" >tab2</span>
	<span class="qiehuantab" >tab3</span>
<div>
<!--切换内容-->
<!--1.-->
<div id="qiehuannr">
	<div class="qiehuan xianshi">内容1</div>
	<div class="qiehuan">内容2</div>
	<div class="qiehuan">内容3</div>
</div>
<!--2.-->
<div id="qiehuannr">
	<div class="qiehuan">内容1</div>
	<div class="qiehuan">内容2</div>
	<div class="qiehuan">内容3</div>
</div>

//1.
<script type="text/javascript">
//mouseenter 是鼠标附上去触发的
$(".qiehuantab").mouseenter(function () {
        //不用判断，当前的li添加active类，其他的删除active类
        $(this).addClass("bianse").siblings(".qiehuantab").removeClass("bianse");
        //对应索引值的div添加selected类，其他的删除selected类
        $("#qiehuannr>.qiehuan").eq($(this).index()).addClass("xianshi").siblings(".qiehuan").removeClass("xianshi");
    })
</script>
//2.
<script type="text/javascript">
$(".qiehuantab").click(function(){
	var i = $(this).index();//获取下标
	$(this).addClass("bianse").siblings().removeClass('bianse');
	$('#qiehuannr>.qiehuan').eq(i).show().siblings().hide();
})

代码仅供参考，纯属个人笔记。