jquery tabs方法的插件封装

html样式

<style>
	.active{
		border-top:1px solid red
	}
	#tab-body div{
		display:none
	}
	.selected{
		display:block
	}
</style>

html页面结构

<div id='wrap'>
	<div id='tab-header'>
		<li class='active'>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</div>
	<div id='tab-body'>
		<div class='selected'>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
</div>

html调用插件

<script src='tabs-plugin.js'></script>
<script>
	$(function(){
		$('#wrap').tabs({
			tabHeaders:'#tab-header>li',
			tabHeaderClass:'active',
			tabBodys:'#tab-body>div',
			tabBodysClass:'selected'
		});
	})
</script>

tabs-plugin.js

(function($){
/**
    * 给$的原型添加tabs方法
    * @param option.tabHeaders        需要注册测事件的tab头选择器
    * @param option.tabHeadersClass   触发事件的面页要添加的类
    * @param option.tabBodys          需要注册事件的页面选择器
    * @param option.tabBodysClass     需要注册事件的页面要添加的类
     */
//给$原型添加tabs方法
	$.fn.tabs = function(options){
		let $wrap = this;//获取最外层的大容器
		
		let on =  $wrap.find(options.tabHeaders).click(function(){
			$(this).addClass(option.tabHeadsClass).siblings().removeClass(option.tabHeadsClass);
            // 获取当前点击的页面的索引
            let idx = $(this).index();
            // 获取索引一致的页面，添加tabBodyClass类，其他兄弟移除此类
            $wrap.find(option.tabBodys).eq(idx).addClass(option.tabBodysClass).siblings().removeClass(option.tabBodysClass);
		})
	}
}(window.jQuery))