支持鼠标滑动切换
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>
