<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>tab选项卡-乔越博客</title> <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<style>
*{ margin: 0; padding: 0; } .box{ width: 440px; height: 298px; border: 1px solid #ccc; margin: 50px auto; } .nav>li{ list-style: none; width: 110px; height: 50px; background: orchid; text-align: center; line-height: 50px; float: left; } .nav .curr{ background: #ccc; } .content>li{ list-style: none; display: none; } .content>.show{ display: block; } </style>
<script>
$(function(){ $(".nav>li").mouseenter(function(){ $(this).addClass("curr"); $(this).siblings().removeClass("curr"); var index = $(this).index(); var $li = $('.content>li').eq(index); $li.addClass('show') $li.siblings().removeClass("show"); })
})
</script> </head> <body>
<div class="box"> <ul class="nav"> <li class="curr">第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> </ul> <ul class="content"> <li class="show"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2577340942.jpg" alt=""></li> <li><img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2565068596.jpg" alt=""></li> <li><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2522880251.jpg" alt=""></li> <li><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p792776858.jpg" alt=""></li> </ul> </div> </body> </html>
|