jQuery实战_tab栏切换

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');
    })
  });

和原生JS一样利用排他思想。
效果:
这里写图片描述

©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值