jQ写的tab选项卡

标签: jq小demo

支持鼠标滑动切换

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>

 

版权声明:本文为weixin_42974569原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42974569/article/details/109179452