jQuery实现tab选项卡切换的小插件

最近在做项目的时候，需要一个 tab 选项卡功能，即通过切换 tab 显示该 tab 下的不同内容，知识点很简单，我在这里以插件的形式写出来，分享给大家，调用方法直接使用即可。

效果：

HTML 代码

<div id="tab_demo" class="tab_demo">
  <div class="tabBar clearfix"><span>选项卡一</span><span>选项卡二</span><span>自适应宽度</span></div>
  <div class="tabCon">内容一</div>
  <div class="tabCon">内容二</div>
  <div class="tabCon">内容三</div>
</div>

CSS 代码

.clearfix:after{content:"\20";display:block;height:0;clear:both;visibility:hidden}
.clearfix{zoom:1}
.tabBar {border-bottom: 2px solid #222}
.tabBar span {background-color: #e8e8e8;cursor: pointer;display: inline-block;float: left;font-weight: bold;height: 30px;line-height: 30px;padding: 0 15px}
.tabBar span.current{background-color: #222;color: #fff}
.tabCon {display: none}

JS 代码

引入 jQuery

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>

!function($) {
	$.fn.mytab = function(options){
		var defaults = {
			tabBar:'.tabBar span',
			tabCon:".tabCon",
			className:"current",
			tabEvent:"click",
			index:0
		}
		var options = $.extend(defaults, options);
		this.each(function(){
			var that = $(this);
			that.find(options.tabBar).removeClass(options.className);
			that.find(options.tabBar).eq(options.index).addClass(options.className);
			that.find(options.tabCon).hide();
			that.find(options.tabCon).eq(options.index).show();
			
			that.find(options.tabBar).on(options.tabEvent,function(){
				that.find(options.tabBar).removeClass(options.className);
				$(this).addClass(options.className);
				var index = that.find(options.tabBar).index(this);
				that.find(options.tabCon).hide();
				that.find(options.tabCon).eq(index).show();
			});
		});
	}
} (window.jQuery);

调用代码

$("#tab_").mytab();

以上关于jQuery实现tab选项卡切换的小插件的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。