JavaScript封装tab切换效果

需求解析：在网页上可能会遇见多个tab切换效果，如果每一个都写一次tab切换的话，比较麻烦，也让代码的体积变大，所以可以封装成一个，哪里需要哪里调用

最终需要实现的效果图

 代码解析：

HTML

<!-- 第一个tab切换-S -->
		<div class="tab-1">
			<div class="tab-1-tit">
				<ul>
					<li>tab1的title-1</li>
					<li>tab1的title-2</li>
					<li>tab1的title-3</li>
				</ul>
			</div>
			<div class="tab-con">
				<div class="tab-item">
					tab-1的内容1
				</div>
				<div class="tab-item">
					tab-1的内容2
				</div>
				<div class="tab-item">
					tab-1的内容3
				</div>
			</div>
		</div>
		<!-- 第一个tab切换-E -->
		<!-- 第二个tab切换-S -->
		<div class="tab-2">
			<div class="tab-2-tit">
				<ul>
					<li>tab2的title-1</li>
					<li>tab2的title-2</li>
					<li>tab2的title-3</li>
				</ul>
			</div>
			<div class="tab-con">
				<div class="tab-item">
					tab-2的内容1
				</div>
				<div class="tab-item">
					tab-2的内容2
				</div>
				<div class="tab-item">
					tab-2的内容3
				</div>
			</div>
		</div>
		<!-- 第二个tab切换-E -->

html模块：因为上面案例的代码太多了，在这我只是给了一个格式，没有写样式

JS模块

$.jstab = function(tab) {
			$(tab).mouseover(function() {
				this_tab = $(this);
				this_tab.addClass("on").siblings().removeClass("on");
				var index = this_tab.index();
				$(tab).parent().parent().parent().find(".tab-con").find(".tab-item").eq(index).show().siblings().hide();
			});

		};

		$.jstab(".tab-1-tit li");
		$.jstab(".tab-2-tit li");

这里用的事件是鼠标移入事件：mouseover 

$.jstab(".tab-1-tit li")

意思就是鼠标移入 .tab-1-tit 下的 li时，给它tab-1下的tab-con 下的tab-item添加class 为 on

第二个同样的道理