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.eq(0).click(function(){ 35 var iNum01 = $btns.filter('.current').index(); 36 37 $btns.eq(iNum01).removeClass('current'); 38 $btns.eq(0).addClass('current'); 39 40 $div.eq(iNum01).removeClass('active'); 41 $div.eq(0).addClass('active'); 42 43 }); 44 $btns.eq(1).click(function(){ 45 var iNum01 = $btns.filter('.current').index(); 46 47 $btns.eq(iNum01).removeClass('current'); 48 $btns.eq(1).addClass('current'); 49 50 $div.eq(iNum01).removeClass('active'); 51 $div.eq(1).addClass('active'); 52 53 }); 54 $btns.eq(2).click(function(){ 55 var iNum01 = $btns.filter('.current').index(); 56 57 $btns.eq(iNum01).removeClass('current'); 58 $btns.eq(2).addClass('current'); 59 60 $div.eq(iNum01).removeClass('active'); 61 $div.eq(2).addClass('active'); 62 }); 63 64 }); 65 </script> 66 </head> 67 <body> 68 <div class="btns"> 69 <input type="button" name="" value="01" class="current"> 70 <input type="button" name="" value="02"> 71 <input type="button" name="" value="03"> 72 </div> 73 74 <div class="con"> 75 <div class="active">按钮1</div> 76 <div>按钮2</div> 77 <div>按钮3</div> 78 </div> 79 </body> 80 </html>