jQ写的tab选项卡

支持鼠标滑动切换

jQ

 <script>
       $(function(){
           $(".nav>li").mouseenter(function(){
               $(this).addClass("ou");
               $(this).siblings().removeClass("ou");
               $(".current>li").eq($(this).index()).addClass("show");
               $(".current>li").eq($(this).index()).siblings().removeClass("show");
           })
       })
   </script>

css

  <style>
       *{
           margin: 0;
           padding: 0;
       }
       .box{
           width: 440px;
           height: 298px;
           border: 1px solid #ccc;
           margin: 50px auto; 
       }
       .nav{
        width: 440px;
        float: left;
       }
       .nav>li{
           list-style: none;
           width: 110px;
           height: 50px;
           background-color: orange;
           text-align: center;
           line-height: 50px;
           float: left;
       }
       .nav .ou{
           background-color: #ccc;
       }
       .current>li{
           height: 248px;
           list-style: none;
           line-height: 248px;
           background-color: pink;
           text-align: center;
           display: none;
       }
       .current .show{
           display: block;
       }
       .current{
           width: 440px;
           float: left;
       }
   </style>

html

  <div class="box">
        <ul class="nav">
            <li class="ou">html</li>
            <li>php</li>
            <li>JQuery</li>
            <li>vue</li>
        </ul>
        <ul class="current">
            <li class="show"><h1>第一张图片</h1></li>
            <li><h1>第二张图片</h1></li>
            <li><h1>第三张图片</h1></li>
            <li><h1>第四张图片</h1></li>
        </ul>
    </div>

 

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

weixin_42974569

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值