jquery选项卡插件
jquery选项卡插件
把选项卡整合了一下,写成个插件,这样可以整个站,或整个页面有多个选项卡时,统一调用。代码的具体注意事项已经写进注释了。用于js获取元素的class名称必须有,选项卡本身的样式,另再取一个名字来设置(本人不大喜欢用id,一般写js代码也用class名称来获取元素)。这样也在一定意义上实现了行为和样式的分离。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> /*CSS源代码*/ /*必须设置的*/ .jsTab_con{ display:none;} .jsTab_title span{ cursor:pointer;} .jsTab_title .jsTab_this{ background:#096;} /*选项卡的样式*/ .js_tab{ width:900px; margin:30px auto 0; border:1px solid #0C9;} .js_tab h2{ font-weight:normal; height:40px; line-height:40px; text-align:center;} .js_tab h2 span{ display:inline-block; width:270px; margin:0 10px; background:#0CF; color:#fff;} .jsTab_con{ width:848px; height:200px; border:1px solid #09C; margin:0 auto 20px;} /*其他样式,可忽略*/ .cen{ text-align:center;} </style> </head> <body> <!-- HTML代码片段中请勿添加<body>标签 //--> <h3 class="cen">页面选项卡统一调用</h3> <p class="cen">结构的标签可改,改成div,ul,li等等都可以,但结构和class不能变。而且.jsTab_title里面最好是span,否则需要修改插件的相应内容。</p> <!--第一个选项卡--> <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> <!-- 推荐开源CDN来选取需引用的外部JS //--> <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script> <script> /*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> </body> </html>
.
相关推荐
APCDE 2020-06-11
viewerlin 2020-05-25
adc00 2020-01-04
老高 2019-12-30
luoj 2011-09-13
xiaoguolaoshi 2008-07-20
Rgenxiao 2011-09-08
支离破碎 2014-06-30
qiuhaotc 2012-02-19
85931235 2012-03-28
bruceli 2019-05-14
南城小伙 2019-06-10
逆风飞舞0 2019-05-14
87530399 2014-05-26
chenyangah 2017-03-31
84236532 2016-11-17
zhangpuego 2016-07-16
Jiminull 2016-03-03