第一种有点bug当移出大的div的时候图片会显示空白界面，如果不想测试可以直接看第二种代码方式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 440px; height: 298px; border: 1px solid #000000; margin: 50px auto; } .nav>li{ list-style: none; width: 110px; height: 50px; background: orange; text-align: center; line-height: 50px; float: left; } .nav>.current{ background: #CCCCCC; } .content>li{ list-style: none; display: none; } .content>.show{ display: inline-block; } </style> <script type="text/javascript" src="js/Jquery.js"></script> <script type="text/javascript"> $(function(){ //1.监听选项卡的移入移出事件 $(".nav>li").mouseenter(function(){ //1.1修改被移入选项卡的背景颜色 $(this).addClass("current"); //1.2获取当前移入选项卡的索引 var index = $(this).index(); //1.3根据索引找到对应的图片 var $li = $(".content>li").eq(index); //1.4显示找到的 图片 $li.addClass("show"); }); //1.监听选项卡的移入移出事件 $(".nav>li").mouseleave(function(){ //1.1还原选项卡的背景颜色 $(this).removeClass("current"); //1.2获取当前移出选项卡的索引 var index = $(this).index(); //1.3根据索引找到对应的图片 var $li = $(".content>li").eq(index); //1.4隐藏对应的图片 $li.removeClass("show"); })； }); </script> </head> <body> <div class="box"> <ul class="nav"> <li class="current">H5+C3</li> <li>JAVA</li> <li>C++</li> <li>PHP</li> </ul> <ul class="content"> <li class="show"><img src="img/HTML.jpg"/></li> <li><img src="img/JAVA.jpg"/></li> <li><img src="img/c++.jpg"/></li> <li><img src="img/PHP.jpg"/></li> </ul> </div> </body> </html> 第二种方式：终极版无BUG <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 440px; height: 298px; border: 1px solid #000000; margin: 50px auto; } .nav>li{ list-style: none; width: 110px; height: 50px; background: orange; text-align: center; line-height: 50px; float: left; } .nav>.current{ background: #CCCCCC; } .content>li{ list-style: none; display: none; } .content>.show{ display: inline-block; } </style> <script type="text/javascript" src="js/Jquery.js"></script> <script type="text/javascript"> $(function(){ $(".nav>li").mouseenter(function(){ //1.1修改被移入选项卡的背景颜色 $(this).addClass("current"); //1.2找到非当前并隐藏还原其他兄弟选项卡的背景颜色 $(this).siblings().removeClass("current"); //1.3获取当前移出选项卡的索引 var index = $(this).index(); //1.4根据索引找到对应的图片 var $li = $(".content>li").eq(index); //1.5隐藏非当前的其他图片 $li.siblings().removeClass("show"); //1.6显示对应的图片 $li.addClass("show"); }); }); </script> </head> <body> <div class="box"> <ul class="nav"> <li class="current">H5+C3</li> <li>JAVA</li> <li>C++</li> <li>PHP</li> </ul> <ul class="content"> <li class="show"><img src="img/HTML.jpg"/></li> <li><img src="img/JAVA.jpg"/></li> <li><img src="img/c++.jpg"/></li> <li><img src="img/PHP.jpg"/></li> </ul> </div> </body> </html>