原创文章，转载请注明出处，谢谢！https://www.cnblogs.com/GaoAnLee/p/9067017.html
每每看到别人写的Jquery插件，自己也试着学习尝试，终有结果，废话不多说，直接上效果：
直接撸代码：
html：
<body>
<div id='tab' class='frame'></div>
</body>
css：
@CHARSET "UTF-8";
div, ul {
overflow: hidden;
margin:;
padding:;
}
.main-content {
padding: 20px 20px;
}
.tabs, .tabs ul li {
float: left;
}
.tabs ul {
list-style: none outside none;
}
.tabs ul li {
line-height: 30px;
margin-right: 2px;
padding: 2px 10px 0 8px;
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
-ms-border-radius: 6px 6px 0 0;
-o-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
font-size: 13px;
cursor: default;
}
.tabs ul li em {
display: inline-block;
}
.tabs ul li .tab-text, .tabs ul li .fa-close {
cursor: pointer;
}
.tabs ul li i:first-child {
margin-right: 5px;
}
.fa-close {
margin-left: 10px;
}
.tab-nav {
background-color: #EEEEEE;
}
.tab-nav-action {
color: #3c8dbc;
}
.tabs-body {
float: left;
padding: 5px 0 0;
}
.tabs, .tabs-body {
width: 100%;
}
.tab-nav-action, .tabs-body {
background-color: #ffffff;
}
.tab-nav, .tabs-body {
color: #000000;
}
.tabs-body div {
padding: 10px;
}
.tabs-body-hide {
display: none;
}
.tabs-body-show {
display: block;
}
jquery.tab.js：
/*
<div id='tab'>
//data
</div>
备注： 背景色建议为 #f4f4f4 最佳
*/ //jquery插件 tab auther:GaoAnLee
;
(function($, window, document, undefined) {
//初始化
function _init(tab, b) {
var _this = tab.element;
var options = $.data(_this, 'tab').options;
//第一次加载 添加tabs主体框架
if (b) {
_this.append('<div class=\"main-content\"></div>');
$('.main-content').append('<div class=\"tabs\"></div>');
$('.main-content').append('<div id=\"tabs-body\" class=\"tabs-body\"></div>');
$('.tabs').append('<ul id=\"tabs\"></div>');
}
//加载最简单tab
$(options.tab).append('<li class=\"' + options.tabActiveClass + '\"><i class=\"\"></i><em class=\"tab-text\">欢迎您</em><i class=\"\"></i></li>');
$(options.tabBody).append('<div class=\"' + options.tabBodyActiveClass + '\">Welcome MMS !</div>'); //切换tab
switchTab(options);
//删除tab
delTab(options);
}
//切换tab
function switchTab(options) {
$('body').on(options.eventType, '.tab-text', function() {
var parntNode = $(this).parent();
var index = parntNode.index();
parntNode.attr('Class', options.tabActiveClass).siblings().attr('Class', options.tabClass);
$(options.tabBody).children().hide().eq(index).show();
});
}
//删除tab
function delTab(options) {
$('body').on(options.eventType, '.fa-close', function() {
var index = $(this).parent().index();
var thisParentClass = $(this).parent().attr('Class');
if (thisParentClass != options.tabClass) {
var _prev = $(this).parent().prev();
var prevIndex = _prev.index();
_prev.attr('Class', options.tabActiveClass);
$(options.tabBody).children().eq(prevIndex).show();
}
$(this).parent().remove();
$(options.tabBody).children().eq(index).remove();
});
} /****************************_init() end****************************/ //追加tab
function addTab(options) {
$(options.tab).children().attr('Class', options.tabClass);
$(options.tabBody).children().hide();
if (options.hasClose) {
$(options.tab).append('<li class=\"' + options.tabActiveClass + '\"><i class=\"fa ' + options.icon + '\"></i><em class=\"tab-text\">' + options.title + '</em><i class=\"fa fa-close\"></i></li>');
} else {
$(options.tab).append('<li class=\"' + options.tabActiveClass + '\"><i class=\"fa ' + options.icon + '\"></i><em class=\"tab-text\">' + options.title + '</em></li>');
}
$(options.tabBody).append('<div class=\"' + options.tabBodyActionClass + '\">' + options.tabContent + '</div>');
}
//选中tab
function selectTab(options) {
var title = options.title;
if (hasTab(title)) {
if (!hasSelected(title)) {
var index = 0;
$(options.tab).children().each(function() {
var t = $(this).children('em').html();
if (t == title) {
index = $(this).index();
}
});
$(options.tab).children().eq(index).attr('Class', options.tabActiveClass).siblings().attr('Class', options.tabClass);
$(options.tabBody).children().hide().eq(index).show();
}
} else {
addTab(options);
}
}
//是否选中tab
function hasSelected(parm) {
var title = parm;
var selectedTabText = $('.tab-nav-action').children('em').html().trim();
if (selectedTabText == title) {
return true;
} else {
return false;
}
}
//是否存在tab
function hasTab(parm) {
var title = parm;
var flag = false;
$('#tabs').children().each(function() {
var t = $(this).children('em').html();
if (t == title) {
flag = true;
}
});
return flag;
} /*************************API function end*************************/ var Tab = function(ele, options) {
this.element = ele,
this.defaults = {
tabActiveClass: 'tab-nav-action',
tabClass: 'tab-nav',
tabBodyActionClass: 'tabs-body-show',
tabBodyClass: 'tabs-body-hide',
tab: '#tabs',
tabBody: '#tabs-body',
eventType: 'click'
},
this.options = $.extend({}, this.defaults, options)
};
Tab.prototype = {
//选中tab
selectTab: function(options) {
selectTab(options);
return false;
},
//是否选中指定tab
hasSelected: function(parm) {
return hasSelected(parm);
},
//是否存在tab
hasTab: function(parm) {
return hasTab(parm);
},
//在最后追加tab
addTab: function(options) {
addTab(options);
return false;
}
};
$.fn.tab = function(target, parm) {
var tab = new Tab(this, target);
if (typeof target == 'string' && typeof parm == 'string') {
return tab[target](parm);
}
if (typeof target == 'string' && typeof parm == 'object') {
var options = $.extend({}, tab.defaults, parm);
return tab[target](options);
}
var state = $.data(this, 'tab');
if (state) {
var dataOptions = state.options;
var newOptions = $.extend({}, dataOptions, target);
$.data(this, 'tab', {
options: newOptions,
e: this
});
} else {
$.data(this, 'tab', {
options: $.extend({}, tab.options, target),
e: this
});
}
return this.each(function(){
_init(tab,true);
});
};
})(jQuery, window, document); $(function() {
$('#tab').tab(); //先加载启动
//测试
$('#tab').tab('addTab', {
icon: 'fa-sitemap',
title: '公司管理',
hasClose: true,
tabContent: '111111111111111'
});
$('#tab').tab('addTab', {
icon: 'fa-th-list',
title: '部门管理',
hasClose: true,
tabContent: '2222'
});
var flag = $('#tab').tab('hasSelected', '公司管理');
console.log(flag); //false
flag = $('#tab').tab('hasTab', '公司管理');
console.log(flag); //true $('#tab').tab('selectTab', {
icon: 'fa-sitemap',
title: '公司管理',
hasClose: true,
tabContent: '111111111111111'
});
});