版权声明：本文为博主原创文章，欢迎转载但请注明出处：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,
leftOperationWidth = 30,
animatSpeed = 150,
linkframe = function(url, value) {
$("#menu-list a.active").removeClass("active");
$("#menu-list a[data-url=‘" + url + "‘][data-value=‘" + value + "‘]").addClass("active");
$("#page-content iframe.active").removeClass("active");
$("#page-content .iframe-content[data-url=‘" + url + "‘][data-value=‘" + value + "‘]").addClass("active");
$("#menu-all-ul li.active").removeClass("active");
$("#menu-all-ul li[data-url=‘" + url + "‘][data-value=‘" + value + "‘]").addClass("active");
},
move = function(selDom) {
var nav = $("#menu-list");
var releft = selDom.offset().left;
var wwidth = parseInt($("#page-tab").width());
var left = parseInt(nav.css("margin-left"));
if (releft < 0 && releft <= wwidth) {
nav.animate({
"margin-left": (left - releft + leftOperationWidth) + "px"
},
animatSpeed);
} else {
if (releft + selDom.width() > wwidth - operationWidth) {
nav.animate({
"margin-left": (left - releft + wwidth - selDom.width() - operationWidth) + "px"
},
animatSpeed);
}
}
},
createmove = function() {
var nav = $("#menu-list");
var wwidth = parseInt($("#page-tab").width());
var navwidth = parseInt(nav.width());
if (wwidth - operationWidth < navwidth) {
nav.animate({
"margin-left": "-" + (navwidth - wwidth + operationWidth) + "px"
},
animatSpeed)
}
},
closemenu = function() {
$(this.parentElement).animate({
"width": "0",
"padding": "0"
},
0,
function() {
var jthis = $(this);
if (jthis.hasClass("active")) {
var linext = jthis.next();
if (linext.length > 0) {
linext.click();
move(linext)
} else {
var liprev = jthis.prev();
if (liprev.length > 0) {
liprev.click();
move(liprev)
}
}
}
//删除导航标签
this.remove();
//删除对应的iframe标签
$("#page-content .iframe-content[data-url=‘" + jthis.data("url") + "‘][data-value=‘" + jthis.data("value") + "‘]").remove()
//删除右边快捷导航对应的标签
$("#menu-all-ul [data-url=‘" + jthis.data("url")+"‘]").remove();
});
event.stopPropagation();
},
init = function() {
$("#page-prev").bind("click",
function() {
var nav = $("#menu-list");
var left = parseInt(nav.css("margin-left"));
if (left !== 0) {
nav.animate({
"margin-left": (left + scrollSetp > 0 ? 0 : (left + scrollSetp)) + "px"
},
animatSpeed);
}
});
$("#page-next").bind("click",
function() {
var nav = $("#menu-list");
var left = parseInt(nav.css("margin-left"));
var wwidth = parseInt($("#page-tab").width());
var navwidth = parseInt(nav.width());
var allshowleft = -(navwidth - wwidth + operationWidth);
if (allshowleft !== left && navwidth > wwidth - operationWidth) {
var temp = (left - scrollSetp);
nav.animate({
"margin-left": (temp < allshowleft ? allshowleft: temp) + "px"
},
animatSpeed);
}
});
$("#page-operation").bind("click",
function() {
var menuall = $("#menu-all");
if (menuall.is(":visible")){
menuall.hide();
} else {
menuall.show();
}
});
$("body").bind("mousedown",function(event) {
if (! (event.target.id === "menu-all" || event.target.id === "menu-all-ul" || event.target.id === "page-operation" || event.target.id === "page-operation" || event.target.parentElement.id === "menu-all-ul")) {
$("#menu-all").hide()
}
event.stopPropagation();
})
};
$.fn.tab = function(){
init();
this.bind("click",
function(){
var linkUrl = this.href;
var linkHtml = this.text.trim();
var selDom = $("#menu-list a[data-url=‘" + linkUrl + "‘][data-value=‘" + linkHtml + "‘]");
if (selDom.length === 0) {
var iel = $("<i>", {
"class": "menu-close"
}).bind("click", closemenu);
$("<a>", {
"html": linkHtml,
"href": "javascript:void(0);",
"data-url": linkUrl,
"data-value": linkHtml
}).bind("click",
function() {
var jthis = $(this);
linkframe(jthis.data("url"), jthis.data("value"))
}).append(iel).appendTo("#menu-list");
$("<iframe>", {
"class": "iframe-content",
"data-url": linkUrl,
"data-value": linkHtml,
src: linkUrl
}).appendTo("#page-content");
$("<li>", {
"html": linkHtml,
"data-url": linkUrl,
"data-value": linkHtml
}).bind("click",
function() {
var jthis = $(this);
linkframe(jthis.data("url"), jthis.data("value"));
move($("#menu-list a[data-url=‘" + linkUrl + "‘][data-value=‘" + linkHtml + "‘]"));
$("#menu-all").hide();
event.stopPropagation();
}).appendTo("#menu-all-ul");
createmove();
} else {
move(selDom);
}
linkframe(linkUrl, linkHtml);
return false;
});
return this;
}
/***
* 将内部函数作为返回值返回，形成闭包。
* 在函数外部可以调用。
* */
return {
closemenu:closemenu
,linkframe:linkframe
}
})(jQuery, window, document);
/**
* 右击事件
* */
//取消右键
$(‘html‘).on(‘contextmenu‘, function (){return false;}).click(function(){
$(‘.popup_menu‘).hide();
});
//注册右击事件
$(‘html‘).on(‘contextmenu‘,‘a‘,function(e){
var that= this;
var popupmenu = kyoPopupMenu.initContextmenu(that);
l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
popupmenu.css({left: l,top: t}).show();
return false;
});
//生成右击事件菜单
var kyoPopupMenu={};
kyoPopupMenu = (function(){
return {
initContextmenu: function (obj) {
//获取当前触发右键点击事件的table的ID
$(‘.popup_menu‘).remove();
var html=‘<div class="popup_menu">‘;
html+=‘<ul style="list-style:none;margin:0; padding:0;font-size:12px;">‘;
html+=‘<li><a menu="updateTab">刷新</a></li>‘;
html+=‘<li><a menu="closeTab">关闭</a></li>‘;
html+=‘<li><a menu="closeOther">关闭其他</a></li>‘;
html+=‘<li><a menu="closeAll">关闭所有</a></li>‘;
html+=‘</ul>‘;
html+=‘</div>‘;
popupMenuApp = $(html).find(‘a‘).attr(‘href‘,‘javascript:;‘).end().appendTo(‘body‘);
//绑定事件
$(‘.popup_menu a[menu="updateTab"]‘).on(‘click‘, function (){
//刷新当前的
tabPlug.linkframe($(obj).attr(‘data-url‘),$(obj).attr(‘data-value‘));
});
$(‘.popup_menu a[menu="closeTab"]‘).on(‘click‘, function (){
//关闭当前选中的
tabPlug.closemenu.call($(obj).find(‘.menu-close‘)[0]);
});
$(‘.popup_menu a[menu="closeOther"]‘).on(‘click‘, function (){
//关闭除了选中的其他tab
$.each($(obj).siblings(), function() {
tabPlug.closemenu.call($(this).find(‘.menu-close‘)[0]);
});
$(‘.popup_menu‘).hide();
});
$(‘.popup_menu a[menu="closeAll"]‘).on(‘click‘, function (){
$(‘#menu-list a‘).each(function(){
//关闭所有，除了首页
tabPlug.closemenu.call($(this).find(‘.menu-close‘)[0]);
});
$(‘.popup_menu‘).hide();
});
return popupMenuApp;
}
}})();
以上就是tab切换的核心代码，还有一些图片和css就不贴了，如果有兴趣可以下载下来看看。
源码下载地址：https://github.com/wangjie1234/wangjie1234.github.io。
结语：第一次发文，有很多不足之处请见谅，以上是博主的拙见，有什么问题可以在评论区留言我会及时回复的。
时间： 2024-10-17 20:07:16