1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>tab</title> 6 <script src="jquery.min.js"></script> 7 <style> 8 .active{ 9 background: yellow; 10 } 11 #contents div{ 12 width: 200px; 13 height: 200px; 14 background: #ccc; 15 border: 1px solid #999; 16 display: none; 17 } 18 </style> 19 </head> 20 <body> 21 <input type="button" value="教育" class="active" /> 22 <input type="button" value="培训" /> 23 <input type="button" value="招生" /> 24 <input type="button" value="出国" /> 25 <div id="contents"> 26 <div style="display: block;">1111</div> 27 <div>2222</div> 28 <div>3333</div> 29 <div>4444</div> 30 </div> 31 <script> 32 $('input').click(function(){ 33 $(this).addClass('active').siblings().removeClass('active'); 34 35 $('#contents>div').eq($(this).index()).show().siblings().hide(); 36 }); 37 </script> 38 </body> 39 </html>