<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--自己的css--> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <style> /*必须设置的*/ .jsTab_con{ display:none;} .jsTab_title span{ cursor:pointer;} .jsTab_title .jsTab_this{ background:#096;} </style> !--第一个选项卡--> <div class="js_tab box1"> <h2 class="jsTab_title"><span>标题11</span><span>标题12</span><span>标题13</span></h2> <div class="jsTab_con"> 内容11 </div> <div class="jsTab_con"> 内容12 </div> <div class="jsTab_con"> 内容13 </div> </div> <!--第二个选项卡--> <div class="js_tab box2"> <h2 class="jsTab_title"><span>标题21</span><span>标题22</span><span>标题23</span></h2> <div class="jsTab_con"> 内容21 </div> <div class="jsTab_con"> 内容22 </div> <div class="jsTab_con"> 内容23 </div> </div> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //使选项卡的第一项显示，必须加入 var tabs=$(".js_tab"); tabs.each(function(){ $(this).find(".jsTab_title span").first().addClass("jsTab_this"); $(this).find(".jsTab_con").first().show(); }); //调用，不能用本身的js_tab调用，需另起一个class或id $(".box1").js_tab(); $(".box2").js_tab(); }); (function($){ $.fn.extend({ "js_tab":function(){ $(this).find(".jsTab_title span").each(function(index){ $(this).click(function(){ $(this).siblings("span").removeClass("jsTab_this"); $(this).addClass("jsTab_this"); var tab_c=$(this).parents(".js_tab").find(".jsTab_con"); tab_c.hide(); tab_c.eq(index).show(); }); return $(this); }); } }); })(jQuery); </script> </html>