<!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>