html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <title>tab标签页四种写法</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/css"> *{margin: 0;padding: 0;} body{font-size: 14px;color: #333;} .tabItem{width:302px; height: 200px; border: 1px solid #ccc;margin: 20px;} .tabItem ul{height: 35px; border-bottom: 1px solid #ccc; list-style: none;} .tabItem li{float: left; width: 100px; border-right: 1px solid #ccc; height: 35px; line-height: 35px; text-align:center; cursor: pointer;} .tabItem li:last-child{border: none;} .tabItem li.active{background:#f60; color: #fff;} .tabContent{display: none;padding: 10px;} </style> </head> <body> <div class="tabItem" id="focusTab"> <ul> <li class="active">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div class="tabC"> <div class="tabContent" style="display:block">1</div> <div class="tabContent">2</div> <div class="tabContent">3</div> </div> </div> </body> </html>
第一种：
var focusTab = function(obj,opt){ this.default = { 'ev' : 'click', 'selecter' : 'li', 'conselecter' : '.tabContent' }; this.options = $.extend({}, this.default, opt); var _this = this; obj.delegate(this.options.selecter, this.options.ev,function(idx){ var index = $(this).index(); $(_this.options.selecter,obj).filter('.active').removeClass('active'); $(_this.options.conselecter,obj).filter(':visible').hide(); $(this).addClass('active'); $(_this.options.conselecter,obj).eq(index).show(); }) } $(function(){ focusTab($('#focusTab'),{ 'ev' :'mouseenter' }) })
第二种：
var focusTab = function(opt){ this.default = { 'ev' : 'click', 'selecter' : 'li', 'conselecter' : '.tabContent' }; this.options = $.extend({}, this.default, opt); }; focusTab.prototype = { func : function(obj){ var _this = this; obj.delegate(this.options.selecter, this.options.ev,function(idx){ var index = $(this).index(); $(_this.options.selecter,obj).filter('.active').removeClass('active'); $(_this.options.conselecter,obj).filter(':visible').hide(); $(this).addClass('active'); $(_this.options.conselecter,obj).eq(index).show(); }) } }; $(function(){ var focus1 = new focusTab({ 'ev' : 'mouseover' }); focus1.func($('#focusTab')); })
第三种：
$.fn.focusTab = function(opt){ this.default = { 'ev' : 'click', 'selecter' : 'li', 'conselecter' : '.tabContent' }; this.options = $.extend({}, this.default, opt); var _this = this; var $this = $(this); this.delegate(this.options.selecter, this.options.ev,function(idx){ var index = $(this).index(); $(_this.options.selecter,$this).filter('.active').removeClass('active'); $(_this.options.conselecter,$this).filter(':visible').hide(); $(this).addClass('active'); $(_this.options.conselecter,$this).eq(index).show(); }) } $(function(){ $('#focusTab').focusTab({ 'ev' : 'mouseover' }); })
第四种：
(function($, window, document,undefined){ //定义tabFocus的构造函数 var tabFocus = function(ele,opt){ this.element = ele; this.default = { 'ev' : 'click', 'selecter' : 'li', 'conselecter' : '.tabContent' }; this.options = $.extend({}, this.default, opt); }; //定义tabFocus的方法 tabFocus.prototype = { method : function(){ var _this = this; return this.element.delegate(this.options.selecter, this.options.ev,function(idx){ var index = $(this).index(); $(_this.options.selecter,this.element).filter('.active').removeClass('active'); $(_this.options.conselecter,this.element).filter(':visible').hide(); $(this).addClass('active'); $(_this.options.conselecter,this.element).eq(index).show(); }) } }; //在插件中使用tabFocus对象 $.fn.focusTab = function(options){ //创建tabFocus的实体 var newTab = new tabFocus(this,options); //调用其方法 return newTab.method(); } }(jQuery, window, document)) $(function(){ $('#focusTab').focusTab({ 'ev' : 'mouseover' }); })