写一个插件来执行 table选型卡切换

自己编写一个table选项卡插件

*{margin: 0;padding: 0;}
			.tabs span{
				display: inline-block;
				width: 60px;
				height: 30px;
				border: 1px solid #055846;
			}
			.tabs div{
				width: 180px;
				height: 150px;
				border: 1px solid #800080;
			}
			.active{
				color: red;
				border: 1px solid red;
			}
<div class="tabs">
		<span class="title ">title1</span>
		<span class="title">title2</span>
		<span class="title">title3</span>
		<div class="content ">content1</div>
		<div class="content">content2</div>
		<div class="content">content3</div>
</div>

下面为插件内容

	(function($){
		$.fn.extend({
			tab:function(){
				var tabs=this;
				var titles=tabs.find(".title");
				var content=tabs.find(".content");
				titles.click(function(){
					var index=titles.index($(this));
					tabs.find(".active").removeClass("active");
					$(this).addClass("active");
					tabs.find(".content:visible").hide();
					tabs.find(`.content:eq(${index})`).show();
				})
			// 初始化
			// 输入内容 标题
			// 输出 隐藏所有的内容 显示第一个 给第一个标题添加active
			titles.eq(0).addClass("active");
			contents.hide();
			contents.eq(0).show();
			}
		})
	}(jQuery))


```javascript
//调用插件
	$(function(){
				$(".tabs").tab();
			})
	//用插件之前 先引用jQuery库