JS简易tab页
先上张效果图(我的游记/我的关注/我的回复。3个不同的tab内容)代码
<div class="navcont clear">
<a class="active" href="javascript:void(0);">我的游记</a>
<a href="javascript:void(0);">我的关注</a>
<a href="javascript:void(0);">我的回复</a>
</div>
<div class="yjcont-r ">
<div class="firstbox">22222222222 </div>
<div class="secondbox">22222222222 </div>
<div class="thirdbox">3333333333333333</div>
</div>
重要的是JS
<script>
$(".yjcont-r>div").hide();
$(".yjcont-r>div:eq(0)").show();
$('.navcont a').click(function(){
var obj=$(this);
obj.siblings().removeClass('active');
obj.addClass('active');
});
$(".navcont a").click(function(){
var n = $(".navcont a").index(this);
$(".navcont a").index(this);
$(".yjcont-r>div").hide();
$(".yjcont-r>div:eq("+n+")").show();
})
</script>