<!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;} span .jsTab_title { Cursor : pointer ; } .jsTab_title .jsTab_this { background : # 096 ; } </ style > - first tab ->! < div class = "js_tab box1" > < H2 class = "jsTab_title " > < span > title. 11 </ span > < span > title 12 is </ span > < span > title 13 is </ span > </ H2 > <div class = "jsTab_con" > content. 11 </ div > < div class = "jsTab_con" > content 12 is </ div > < div class = "jsTab_con" > content 13 is </ div > </ div > <-! of two tab -> < div class = "js_tab BOX2" > < h2 class = "jsTab_title" > < span > title 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 () { // the first item display tab must be added var tabs = $ ( " .js_tab " ); tabs.each ( function () { $ ( the this ) .find ( " .jsTab_title span " ) .first (). addClass (. " jsTab_this " ); $ ( the this ) .find ( " .jsTab_con " ) .first (). show (); }); // call, the call itself can not js_tab, from a subject or a class ID $ ( " .box1 " ) .js_tab (); $ ( " .box2 " ) .js_tab (); }); ( function ($) { $ .fn.extend ({ " js_tab " : function () { $ ( the this ) .find ( " .jsTab_title span " ) .each ( function (index) { $ ( the 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>