jq实现简单的tab切换效果

最新推荐文章于 2025-06-19 12:40:23 发布

原创最新推荐文章于 2025-06-19 12:40:23 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jq #tab切换 #html

jQuery 专栏收录该内容

8 篇文章

订阅专栏

该博客介绍了如何利用jQuery实现简单的Tab切换效果。通过HTML布局，CSS样式设置基础样式，再用jQuery处理点击事件，实现Tab面板的焦点切换，即点击某个Tab时，移除其他Tab的焦点，并将当前点击的Tab和对应内容区域设为焦点状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分：


<div id="tabhead" class="tabhead">
    <span class="tab" data-id="remote">插入图片</span>
    <span class="tab focus" data-id="upload">本地上传</span>
    <span class="tab" data-id="online">在线管理</span>
    <span class="tab" data-id="search">图片搜索</span>
</div>
<div id="tabbody" class="tabbody">
<div id="remote" class="panel">111</div>
<div id="upload" class="panel focus">222</div>
<div id="online" class="panel">333</div>
<div id="search" class="panel">444</div>
</div>

css部分：

 .panel{display:none;}
 .panel.focus{display:block}

jq部分：

$("#tabhead .tab").click(function () {
        $("#tabhead .tab").removeClass("focus");
        $("#tabbody .panel").removeClass("focus");
        $(this).addClass("focus");
        $("#"+$(this).attr("data-id")).addClass("focus");
});