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: 012 }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>
