支持鼠标滑动切换

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>