1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .btns input{ 8 height: 40px; 9 width: 100px; 10 outline: none; /* 去掉边框的线 */ 11 border: 0 12 } 13 .current{ 14 background-color: gold; 15 } 16 .con{ 17 height:200px; 18 width: 200px; 19 position: relative; 20 overflow: hidden; 21 } 22 .spilde{ 23 width: 600px; 24 height: 200px; 25 position: absolute; 26 left: 0; 27 top: 0; 28 } 29 .spilde div{ 30 width: 200px; 31 height: 200px; 32 text-align: center; 33 line-height: 200px; 34 background-color: gold; 35 float: left; 36 } 37 .con .active{ 38 display: block; 39 } 40 </style> 41 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 42 <script type="text/javascript"> 43 $(function(){ 44 var $btns = $('.btns input'); 45 var $div = $('.con .spilde'); 46 $btns.click(function(){ 47 $(this).addClass('current').siblings().removeClass('current'); 48 // $div.stop().css({'left':-200*$(this).index()}); // 通过css样式改变 49 $div.stop().animate({'left':-200*$(this).index()}); // 通过动画改变 50 51 }); 52 53 }); 54 </script> 55 </head> 56 <body> 57 <div class="btns"> 58 <input type="button" name="" value="01" class="current"> 59 <input type="button" name="" value="02"> 60 <input type="button" name="" value="03"> 61 </div> 62 63 <div class="con"> 64 <div class="spilde"> 65 <div>按钮1</div> 66 <div>按钮2</div> 67 <div>按钮3</div> 68 </div> 69 </div> 70 </body> 71 </html>