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>