html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; list-style: none; font-size: 14px; font-family: 'Microsoft yahei'; } .tab { width: 300px; height: 400px; margin: 30px 0 0 30px; position: relative; } .tab_nav { width: 300px; height: 43px; position: absolute; left: 0; top: 0; border: 1px solid #ccc; border-bottom: none; } .tab_cont { width: 302px; height: 356px; position: absolute; left: 0; top: 43px; } .tab_nav > li { float: left; width: 100px; height: 40px; line-height: 40px; text-align: center; border-top: 3px solid green; cursor: pointer; } .tab_nav > li.active { border-top: 3px solid orange; background: #f7f7f7; } .tab_cont > li { width: 300px; height: 356px; border: 1px solid #ccc; display: none; } .tab_cont > li.active { display: block; } </style> </head> <body> <div class="tab"> <ul class="tab_nav"> <li class='tab_nav_item active'>导航一</li> <li class="tab_nav_item">导航二</li> <li class="tab_nav_item">导航三</li> </ul> <ul class="tab_cont"> <li class="tab_cont_item active">内容一</li> <li class="tab_cont_item">内容二</li> <li class="tab_cont_item">内容三</li> </ul> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, illo officia quidem recusandae nihil consectetur sunt tempore tenetur voluptate atque quasi doloremque ratione eaque, sequi nam ducimus, eligendi deleniti modi.</p> <script src="jquery.min.js"></script> <script src="jq.fn.tabcc.js"></script> <script> // 参数以对象的形式传入 // 调用方式：$('.tab').tabcc({}); $('.tab').tabcc({ 'navItem': '.tab_nav_item', 'contItem': '.tab_cont_item' }); </script> </body> </html>
js:
;(function ($) { // 1.创建一个构造函数，传入要绑定的元素和参数的对象，初始化defaults参数默认值 var Tab = function (ele, options) { this.$element = ele; this.defaults = { 'navItem': '', 'contItem': '' }; this.options = $.extend({}, this.defaults, options); }; // 2.暴露出原型方法，对元素进行操作 Tab.prototype = { _init: function () { var $this = this.$element; var $navItem = this.options.navItem; var $contItem = this.options.contItem; $this.find($navItem).on('click', function () { //console.log($(this).index()); var _index = $(this).index(); //console.log(_index); $this.find($navItem).each(function () { $(this).removeClass('active'); }); $(this).addClass('active'); $this.find($contItem).each(function () { $(this).removeClass('active'); }); $this.find($contItem).eq(_index).addClass('active'); }); } }; // 3.把方法放在插件扩展里，形成插件，方便调用 $.fn.tabcc = function (options) { // 初始化构造函数对象（实例化对象） var tab = new Tab(this, options); tab._init(); }; })(jQuery);
添加一个fade效果参数：
;(function ($, win, doc, undefined) { // 1.创建一个构造函数，传入要绑定的元素和参数的对象，初始化defaults参数默认值 var Tab = function (ele, options) { this.$element = ele; this.defaults = { navItem: '', contItem: '', eventType: 'click', animateSwitch: undefined // fade|slide|toTop }; this.options = $.extend({}, this.defaults, options); }; // 2.暴露出原型方法，对元素进行操作 Tab.prototype = { _init: function () { var $this = this.$element; var $navItem = this.options.navItem; var $contItem = this.options.contItem; var $eventType = this.options.eventType; var $animateSwitch = this.options.animateSwitch; // 改变事件，mouseover或者click，让用户自己传入 $this.find($navItem).on($eventType, function () { //console.log($(this).index()); var _index = $(this).index(); //console.log(_index); $this.find($navItem).each(function () { $(this).removeClass('active'); }); $this.find($contItem).each(function () { $(this).removeClass('active'); }); if($animateSwitch == undefined) { $(this).addClass('active'); $this.find($contItem).eq(_index).addClass('active'); }else if($animateSwitch == 'fade') { $this.find($contItem).each(function () { $(this).removeClass('active').hide(); }); $this.find($contItem).eq(_index).fadeIn(); $(this).addClass('active'); } }); } }; // 3.把方法放在插件扩展里，形成插件，方便调用 $.fn.tabcc = function (options) { // 初始化构造函数对象（实例化对象） var tab = new Tab(this, options); tab._init(); }; })(jQuery, window, document);