1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 border: none; 11 } 12 ul, li { 13 list-style: none; 14 } 15 16 #box { 17 width: 500px; 18 height: 400px; 19 margin: 20px auto; 20 } 21 22 #list1 { 23 height: 26px; 24 } 25 26 #list1 li { 27 width: 30px; 28 height: 26px; 29 line-height: 26px; 30 float: left; 31 background: #ddd; 32 padding: 0 10px; 33 cursor: pointer; 34 } 35 36 #list1 li.hover{ 37 background: #ABCDEF; 38 color: white; 39 } 40 #list2 { 41 width: 480px; 42 height: 320px; 43 background: #abcdef; 44 padding: 10px; 45 } 46 47 #list2 li, #list2 img { 48 width:480px; 49 height: 320px; 50 } 51 </style> 52 </head> 53 <body> 54 <div id="box"> 55 <ul id="list1"> 56 <li class= "hover">tab1</li> 57 <li>tab2</li> 58 <li>tab3</li> 59 </ul> 60 <ul id="list2"> 61 <li><img src="images/11.jpg"/></li> 62 <li><img src="images/22.jpg"/></li> 63 <li><img src="images/33.jpg"/></li> 64 </ul> 65 66 </div> 67 68 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 69 <script type="text/javascript"> 70 $(function () { 71 //第一张图片 显示，其他隐藏 72 $("#list2").find("li").first().show().siblings().hide(); 73 74 //移入 75 $("#list1 li").mouseenter(function () { 76 $(this).addClass("hover").siblings().removeClass("hover"); 77 var index = $(this).index(); 78 $("#list2 li").eq(index).show().siblings().hide(); 79 }); 80 }) 81 </script> 82 </body> 83 </html>
原文：http://www.cnblogs.com/1032473245jing/p/7494900.html