精简jQuery Tabs

时间：2024-08-31 20:34:44

闲来无事，周末用jQuery写了一个比较精简的Tabs，个别地方可以用到。

截图及代码如下：

精简jQuery Tabs

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>tab test</title>

     <style type="text/css">

         *{padding:0;margin:0;}

         ul,li{list-style-type:none;}

         .hide{display:none;}

         .show{display:block;}

         #tabs{width:300px;margin:50px auto 0;}

         #tabs .mt{height:25px;zoom:1;}

         #tabs .mt:after{content:'\20';display:block;clear:both;}

         #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;}

         #tabs .mt .curr{position:relative;z-index:1;height:19px;border-color:#ccc;border-bottom:none;background:#fff;color:#333;}

         #tabs .con{height:120px;padding:10px;border:1px solid #ddd;border-radius:0 5px 5px 5px;}

     </style>

     <script type="text/javascript" src="js/jquery-1.6.4-min.js"></script>

 </head>

 <body>

 <div id="tabs" class="m">

     <div class="mt">

         <ul>

             <li class="tit curr">tab1</li>

             <li class="tit">tab2</li>

             <li class="tit">tab3</li>

         </ul>

     </div>

     <div class="mc">

         <div id="con1" class="con">内容1</div>

         <div class="con hide">内容2</div>

         <div class="con hide">内容3</div>

     </div>

 </div>

 <script type="text/javascript">

 (function(){

     var $tit = $("#tabs .tit"),$con = $("#tabs .con");

     $tit.click(function(){

         var index = $tit.index($(this));

         $(this).addClass("curr").siblings().removeClass("curr");

         $con.addClass("hide");

         $($con.get(index)).removeClass("hide");

     })

 })();

 </script>

 </body>

 </html>

相关文章