版权声明：本文为博主原创文章，欢迎转载但请注明出处：http://www.cnblogs.com/wang-jie1993/p/7614349.html。
背景：由于公司在做一个web项目，里面需要用到tab切换，但是网上的很多例子虽然实现了tab的切换但是使用起来缺不是很方便，为此我将自己项目中反复修改后比较全面tab切换分享出来，供大家参考，结尾处会附上源码地址。
Tab切换的主要功能：
1.tab页签的创建和对应页面的生成。
2.tab页标签导航栏左右滑动。
3.竖直导航。
4.右击事件（刷新、关闭、关闭其他、关闭所有）。
首先来一波在线演示：https://wangjie1234.github.io/tab/index.html。
效果图：
废话不多说，上代码。
核心代码：index.html入口，注意在主页面要显式的加载初始化的一些数据$(".menu a").tab();
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery打开多个标签页可以左右移动</title>
<meta charset="utf-8" />
<link href="css/tabstyle.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/tab.js"></script>
</head>
<div class="wapper">
<div class="menu">
<a href="content.html#1">菜单管理</a>
<a href="content.html#2">角色管理</a>
<a href="content.html#3">人员管理</a>
<a href="content.html#4">角色权限配置</a>
<a href="content.html#5">用户管理</a>
<a href="content.html#6">工单管理</a>
<a href="content.html#7">创建新装单</a>
<a href="content.html#8">查询单据</a>
<a href="content.html#9">费用管理</a>
<a href="content.html#10">财务报帐</a>
<a href="content.html#11">企业维护</a>
<a href="content.html#12">省份维护</a>
<a href="content.html#13">国家维护</a>
<a href="content.html#14">GPS地址位置管理</a>
<a href="content.html#15">点管理</a>
<a href="content.html#16">没有了</a>
<a href="content.html#17">别点了</a>
<a href="content.html#18">再点也没有了</a>
<a href="content.html#19">不信？</a>
<a href="content.html#20">随你了</a>
<a href="content.html#21">开心就好</a> </div>
<!--菜单HTML Start-->
<div id="page-tab">
<button class="tab-btn" id="page-prev"></button>
<nav id="page-tab-content">
<div id="menu-list"> </div>
</nav>
<button class="tab-btn" id="page-next"></button>
<div id="page-operation">
<div id="menu-all">
<ul id="menu-all-ul">
</ul>
</div>
</div>
</div>
<!--菜单HTML End-->
<!--iframe Start (根据页面顶部占用高度，自行调整高度数值)-->
<div id="page-content" style="height: calc(100%);"> </div>
<!--iframe End-->
</div>
<script>
//初始化a标签链接到tab
$(".menu a").tab();
</script>
</body>
</html>
核心的js代码：
var tabPlug=(function($, window, document) {
var scrollSetp = 500,
operationWidth = 90,
leftOperation