jQuery实战_tab栏切换

最新推荐文章于 2025-09-24 14:36:58 发布

原创最新推荐文章于 2025-09-24 14:36:58 发布 · 1.2w 阅读

19 ·

CC 4.0 BY-SA版权

jQuery系列专栏收录该内容

30 篇文章

订阅专栏

本文介绍使用 jQuery 实现 tab 栏切换效果的方法。通过 HTML 结构定义 tab 栏及内容，结合 CSS 和 JavaScript 实现点击切换显示内容，并伴有下划线高亮效果。

jQuery实现tab栏切换

HTML结构：

<ul>
    <li class="active">第一栏</li>
    <li>第二栏</li>
    <li>第三栏</li>
    <li>第四栏</li>
</ul>
<div class="content">
    <div class="tab selected">我是第一栏的内容</div>
    <div class="tab">我是第二栏的内容</div>
    <div class="tab">我是第三栏的内容</div>
    <div class="tab">我是第四栏的内容</div>
</div>

CSS：

.active{
         border-bottom: 2px solid red;
        }
.content .selected{
         display: block;
        }
  //active 用来显示下划线
  //selected 用来控制显示（默认都是隐藏的）

JS：

 $(function(){
    $("ul>li").mouseenter(function(){
        //给li添加下横线
        $(this).addClass('active').siblings('li').removeClass('active');
        var index = $(this).index();
        //显示对应的div
        $('.tab').eq(index).addClass('selected').siblings('div').removeClass('selected');
    })
  });