jquery怎么实现tab切换效果

2025-03-28 15:22:54

推荐回答（2个）

回答1：

方法/步骤

首先新建一个html页面，然后把tab结构写好，一个大的div中嵌套一个小的标题块儿和一个内容块儿。

在把样式加上，

再然后引入jQuery文件，准备写jQuery实现tab切换效果。

主要jQuery代码如下，就是当点击某个li标签时，这个标签添加选中的样式，然后对应的内容显示出来，隐藏其他内容。

动态演示tab效果。

回答2：

布局就不写了，假设上面有3个li，激活的tab样式为active，下面对应3个div

$('li').click(function(){
$(this).addClass('active').siblings('li').removeClass('active');
$('div').eq($(this).index()).show().siblings('div').hide();
});