Question

jQuery怎么实现tab页切换效果

Answer 1

<ul>
<li>美妆</li>
<li>零食</li>
<li>生鲜</li>
<li>手机</li>
</ul>
<div>
<div class='item'>
这是美妆对应的模块
</div>
<div class='item'>
这是零食对应的模块
</div>
<div class='item'>
这是生鲜对应的模块
</div>
<div class='item'>
这是手机对应的模块
</div>

</div>
// 默认 模块内容显示第一个选项卡中的内容
$('.item').eq(0).css('display','block');
$('ul li').each(function(){
// 获取当前鼠标点击的li的序号
var i = $(this).index();
// 当鼠标在li点击，添加单击事件处理程序
$(this).click(function(){
// 移出所有li的cc样式
$('li').removeClass('cc');
// 将cc样式添加给当前点击的li
$(this).addClass('cc');
// 隐藏所有的div
$('.item').hide();
// 显示当前点击的那个li需要对应的div
$('.item').eq(i).show();
})

})
粘上去一看就懂了,简单