1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gb2312"> 5 <meta http-equiv="X-UA-Compatible" content="IE=7"> 6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $(".menu a").click(function(){ 10 $(this).addClass("curr").siblings().removeClass("curr"); 11 $(".text div").eq($(this).index()).show().siblings().hide(); 12 }); 13 }); 14 </script> 15 <title>简单的tab切换</title> 16 <style> 17 *{margin:0;padding:0} 18 .menu{width:500px;margin:20px auto} 19 .menu a{display:inline-block;width:100px;height:35px;line-height:35px;text-align:center;color:#000;background:#ccc} 20 .menu a.curr{background:#06f;color:#fff;font-weight:bold} 21 .text{width:480px;height:170px;padding:10px;font-size:20px;border:1px solid #ccc} 22 .hide{display:none} 23 </style> 24 </head> 25 26 <body> 27 <div class="menu"> 28 <a href="javascript:;" class="curr">Tab1</a> 29 <a href="javascript:;">Tab2</a> 30 <a href="javascript:;">Tab3</a> 31 <a href="javascript:;">Tab4</a> 32 <div class="text"> 33 <div>我是内容1111111111我是内容111111111</div> 34 <div class="hide">我是内容2222222222我是内容2222222222</div> 35 <div class="hide">我是内容33333333我是内容33333333</div> 36 <div class="hide">我是内容444444444我是内容44444444</div> 37 </div> 38 </div> 39 </body> 40 </html>