版權聲明：本文為博主原創文章，歡迎轉載但請注明出處：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。
結語：第一次發文，有很多不足之處請見諒，以上是博主的拙見，有什么問題可以在評論區留言我會及時回復的。