<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>tab 插件封装</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <style> .tab{ width:98%;} .tab_menu ul{ width:98%; list-style:none;} .tab_menu li{ list-style:none; float:left; margin-right:4px; display:block; border-right:#4488BB solid 1px;border-left:#4488BB solid 1px; border-top:#4488BB solid 1px; cursor:pointer; color:#000; height:20px; width:auto; padding:5px;} .tab_box{ border:solid #4488BB 1px; padding:4px; height:auto; width:98%; float:left;} .tab_selected{ background:#4488BB;} .tab_displayNone{ display:none;} li{ background:#EEEEEE; list-style:none;} </style> <script type="text/javascript" src="js/jquery.tab.js"></script> </head> <body> <script type="text/javascript"> $(function() { $(".tab").XQHTab({tabWidth:'500px',autoHeight:'400px'}); }); </script> <div class="tab"> <div class="tab_menu"> <ul> <li class="tab_selected">JQuery</li> <li>ExtJs</li> <li>Sliverlight</li> </ul> </div> <div class="tab_box"> <div>Hello JQuery!</div> <div class="tab_displayNone">Hello ExtJs!</div> <div class="tab_displayNone">Hello Sliverlight!</div> </div> </div> </body> </html>
jquery.tab.js：
(function($) { $.fn.extend({ //Tab插件名称 XQHTab: function(options) { //默认值 var defaults = { tabSelected: "tab_selected", tabWidth: "100%", autoHeight: "true" }; var options = $.extend(defaults, options); $(this).css("width", options.tabWidth); //选项卡 this指通过当前选择器获取的JQuery对象 var tab = $(".tab_menu ul li", this); //选项内容 var tabContent = $(".tab_box > div", this); if (options.autoHeight != "true") { tabContent.css("height", options.autoHeight); } //单击选项卡 tab.click(function() { $(this).addClass(options.tabSelected).siblings().removeClass(options.tabSelected); var curIndex = tab.index(this); tabContent.eq(curIndex).show().siblings().hide(); }); //return this使JQuery方法可链 return this; } }); })(jQuery);
