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 } 11 .current{ 12 background-color: gold; 13 } 14 .con div{ 15 width: 200px; 16 height: 200px; 17 text-align: center; 18 margin: 50px auto 0; 19 line-height: 200px; 20 background-color: gold; 21 display: none; 22 } 23 .con .active{ 24 display: block; 25 } 26 </style> 27 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 28 <script type="text/javascript"> 29 $(function(){ 30 var $btns = $('.btns input'); 31 var $div = $('.con div'); 32 // alert($div.length); 33 // alert($div.eq(0)); 34 $btns.click(function(){ 35 // this 指的是原生的this，它表示当前的点击对象 36 // siblings() 只选择除了被点击对象之外的同级元素 37 $(this).addClass('current').siblings().removeClass('current'); 38 $div.eq($(this).index()).addClass('active').siblings().removeClass('active'); 39 }); 40 41 }); 42 </script> 43 </head> 44 <body> 45 <div class="btns"> 46 <input type="button" name="" value="01" class="current"> 47 <input type="button" name="" value="02"> 48 <input type="button" name="" value="03"> 49 </div> 50 51 <div class="con"> 52 <div class="active">按钮1</div> 53 <div>按钮2</div> 54 <div>按钮3</div> 55 </div> 56 </body> 57 </html>