<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .tabs-nav li { float: left; cursor: pointer; } .tabs { width: 80.9%; height: auto; overflow: hidden; } .tabs-nav { width: 100%; height: auto; overflow: hidden; display: flex; justify-content: space-around; } .tabs-contents { width: 100%; height: auto; overflow: hidden; } .tabs-nav li.active { color: #9d0e0e; border-bottom: 1px solid #9D0E0E; } </style> </head> <body> <div class="tabs" data-vendor="tabs"> <ul class="tabs-nav"> <li>1</li> <li>2</li> <li>3</li> </ul> <div class="tabs-contents">内容1</div> <div class="tabs-contents">内容二</div> <div class="tabs-contents"> <div class="tabs" data-vendor="tabs"> <ul class="tabs-nav"> <li>1</li> <li>2</li> <li>3</li> </ul> <div class="tabs-contents">内容1</div> <div class="tabs-contents">内容二</div> <div class="tabs-contents">内容三</div> </div> </div> </div> <div class="tabs" data-vendor="tabs"> <ul class="tabs-nav"> <li>1</li> <li>2</li> <li>3</li> </ul> <div class="tabs-contents">内容1</div> <div class="tabs-contents">内容二</div> <div class="tabs-contents">内容三</div> </div> </body> <script type="text/javascript"> (function($) { var name = 'myTabs'; // 选项卡 var AppTabs = function(element, options) { // 参数继承 this.options = $.extend(true, {}, AppTabs.DEFAULTS, options); // 对象 this.$this = $(element); this.$nav = $(element).children('.tabs-nav'); this.$navItems = this.$nav.children('li'); this.$contents = $(element).children('.tabs-contents'); // 初始化 this.init(); }; // 实现方法 AppTabs.prototype = { // 初始化 init: function() { // 当前高亮 - 默认，获取 .active 的 index 值，否则第一个高亮 var $activeNav = this.$nav.children('li.active:first'); this.nowInt = $activeNav[0] ? $activeNav.index() : parseInt(this.options.startInt); this.flip(this.nowInt); // 事件绑定 $.each(this.$navItems, $.proxy(function(i, item) { $(item).on('click.' + name, $.proxy(this, 'flip', i)); }, this)); }, // 切换 flip: function(index) { // 标签切换 this.$navItems.removeClass('active') .eq(index) .addClass('active'); // 内容切换 this.$contents.hide() .eq(index) .show(); } }; // 暴露参数 AppTabs.DEFAULTS = { startInt: 0 }; // jQuery 调用 $.fn.appTabs = function(options) { var isMethod = (typeof options === 'string') ? true : false; return this.each(function() { var $this = $(this), data = $.data(this, name); if(!data || options) { $.data(this, name, new AppTabs(this, isMethod ? {} : options)); data = $.data(this, name); } if(isMethod) { data.call(options, args); } }); }; // 自动调用 $(window).on('load.app.' + name, function() { $('[data-vendor="tabs"]').appTabs(); }); })(jQuery); </script> </html>