精简jQuery Tabs
闲来无事，周末用jQuery写了一个比较精简的Tabs，个别地方可以用到。
截图及代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>tab test</title> 6 <style type="text/css"> 7 *{padding:0;margin:0;} 8 ul,li{list-style-type:none;} 9 .hide{display:none;} 10 .show{display:block;} 11 #tabs{width:300px;margin:50px auto 0;} 12 #tabs .mt{height:25px;zoom:1;} 13 #tabs .mt:after{content:'\20';display:block;clear:both;} 14 #tabs .mt .tit{float:left;height:18px;padding:3px 15px;border:1px solid #ddd;border-radius:5px 5px 0 0;margin-right:5px;background:#eee;line-height:18px;text-align:center;cursor:pointer;color:#666;} 15 #tabs .mt .curr{position:relative;z-index:1;height:19px;border-color:#ccc;border-bottom:none;background:#fff;color:#333;} 16 #tabs .con{height:120px;padding:10px;border:1px solid #ddd;border-radius:0 5px 5px 5px;} 17 </style> 18 <script type="text/javascript" src="js/jquery-1.6.4-min.js"></script> 19 </head> 20 <body> 21 <div id="tabs" class="m"> 22 <div class="mt"> 23 <ul> 24 <li class="tit curr">tab1</li> 25 <li class="tit">tab2</li> 26 <li class="tit">tab3</li> 27 </ul> 28 </div> 29 <div class="mc"> 30 <div id="con1" class="con">内容1</div> 31 <div class="con hide">内容2</div> 32 <div class="con hide">内容3</div> 33 </div> 34 </div> 35 <script type="text/javascript"> 36 (function(){ 37 var $tit = $("#tabs .tit"),$con = $("#tabs .con"); 38 $tit.click(function(){ 39 var index = $tit.index($(this)); 40 $(this).addClass("curr").siblings().removeClass("curr"); 41 $con.addClass("hide"); 42 $($con.get(index)).removeClass("hide"); 43 }) 44 })(); 45 </script> 46 </body> 47 </html>
