jQuery tab选项卡插件

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery tab选项卡插件</title> <style type="text/css"> *{ margin:0; padding:0;} body { font:12px/1.8 Arial; color:#666;} h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;} .wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px;} ul,li{ list-style:none;} .tab{ width:450px; margin:0 auto 50px;} .tab-hd { background:#F93; overflow:hidden; zoom:1;} .tab-hd li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;} .tab-hd li.active{ background:#F60;} .tab-bd li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;} </style> <script type="text/javascript" src="http://www.wufangbo.com/demo/jquery-1.4.4.min.js"></script> </head> <body> <h1 class="tit-h1">jQuery tab选项卡插件(可多次使用)_前端开发-武方博</h1> <div class="wrap"> <script type="text/javascript"> //tab切换 $(function () { function tabs(tabTit, on, tabCon) { $(tabCon).each(function () { var dom = $(this); var index = dom.attr('data-index'); if (!index) { index = 0;} dom.children().eq(index).show(); }); $(tabTit).each(function () { var dom = $(this); var index = dom.attr('data-index'); if (!index) { index = 0; } dom.children().eq(index).addClass(on); }); function tabHover() { var thisDom = $(this); thisDom.addClass(on).siblings().removeClass(on); var index = $(tabTit).children().index(this); $(tabCon).children().eq(index).show().siblings().hide(); }; $(tabTit).children().each(function () { var thisDom = $(this); if (thisDom.attr('data-notab') != 1) {//data-notab 1=notab thisDom.hover(tabHover); } else if (thisDom.attr('data-tabway') == 1) {//data-tabway 1=click thisDom.click(tabHover); } }); } tabs(".tab-hd", "active", ".tab-bd"); }); </script> <div class="tab"> <ul class="tab-hd"> <li data-notab='1'>data-notab='1'</li> <li data-notab='1' data-tabway='1'> click</li> <li>选项3</li> </ul> <ul class="tab-bd"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul> </div> <div class="tab"> <ul class="tab-hd"><li>选项4</li><li>选项5</li><li>选项6</li></ul> <ul class="tab-bd"><li>内容4</li><li>内容5</li><li>内容6</li></ul> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » jQuery tab选项卡插件