<div class="container-fluid"><div class="row"><!--添加左側菜單欄 --><div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><div class="pannel-group" id="accordion"><div id="left-nav" class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" class="nav-header collapsed" data-parent="#accordion" href="#tag20"><iclass="glyphiconglyphicon-cog"></i>  項目管理<span class="pull-right glyphiconglyphicon-chevron-toggle"></span></a></h4></div><div id="tag20" class="panel-collapse collapse in"><div class="panel-body"><ulclass="navnav-list"><li class="active"><a href="#" onclick="addTab({'menuID':'21', 'father':'navtab', 'tabName':'項目管理1', 'tabContentID':'tabContent', 'tabUrl':'/testulr'})"><iclass="glyphiconglyphicon-cog"></i>  項目管理1</a></li><li class="active"><a href="#" onclick="addTab({'menuID':'22', 'father':'navtab', 'tabName':'項目管理2', 'tabContentID':'tabContent', 'tabUrl':''})"><iclass="glyphiconglyphicon-cog"></i>  項目管理2</a></li></ul></div></div></div></div></div><!--添加tab頁面 --><div class="col-xs-10 col-sm-10 col-md-10 col-lg-10"><ulid="navtab" class="navnav-tabs"><!--通過js獲取 tab--></ul><!-- tab頁面的內容 --><div id="tabContent" class="tab-content"><!--通過js獲取 tab對應的頁面內容--></div></div></div></div></body></html>

/** * 增加tab標簽頁 * @param options： * menuIDtab標簽頁對應的左側導航菜單在數據庫表中的id，作為tab元素id的組成部分 * tabName    tab標簽頁名稱 * tabUrl    tab“裝載”的url * tabContentID tab標簽頁的頁面內容所在的父級元素（div容器） * * @returns {boolean} */function addTab(options) {setBreadcrumb(options.level1, options.level2, options.tabName);//tabUrl:當前tab所指向的URL地址varisExists= isTabExists(options.menuID);if(isExists){ // 如果tab標簽頁已打開，則選中、激活$("#tab-a-" + options.menuID).click(); // 注意，必須是點擊 a標簽才起作用} else {// 新增 tab 標簽頁    //按鈕圖標 '<i class="glyphiconglyphicon-remove"></i></a>'$("#" + tabFatherElementID).append('<li role="presentation" id="tab-li-' + options.menuID + '">' +'  <a href="#tab-content-' +options.menuID + '" data-toggle="tab" role="tab" id="tab-a-' + options.menuID + '">'+ options.tabName + '<button class="close closeTab" type="button" onclick="closeTab(this,' + "'" + options.level1 + "','" + options.level2 + "','" + options.tabName + "'" +');">×</button>' + '</a>' +'</li>');// 設置 tab標簽頁的內容var content = '<iframe name="tabIframe" src="' + options.tabUrl + '" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes" onload="changeFrameHeight()"></iframe>';$("#" + options.tabContentID).append('<div id="tab-content-' + options.menuID + '" role="tabpanel" class="tab-pane">' + content + '</div>');$("#tab-a-" + options.menuID).click(); // 選中打開的tabcurrentIframID= 'iframe' + options.menuID;  }} /*** * 判斷tab頁是否已經打開 * @paramtabName當前tab的名稱 * @returns {boolean} */function isTabExists(menuID){var tab = $('#tab-li-' + menuID + ' > #tab-a-' + menuID);return tab.length>0;}/** * 關閉tab標簽頁 * @param button */function closeTab(button) {//通過所點擊的x 按鈕，找到對應li標簽的idvar li_id= $(button).parent().parent().attr('id');var id = li_id.replace('tab-li-', '');var li_active= $("#"+ tabFatherElementID+ " >li.active");if (li_active.attr('id') == li_id) { // 如果關閉的是當前處于選中狀態的TABif (li_active.prev()[0]) { // 如果當前tab標簽之前存在tab標簽，則激活前一個標簽頁（前后順序對應左右順序li_active.prev().find("a").click();    } else if (li_active.next()[0]) { // 如果當前tab標簽之前不存在tab標簽，并且在其之后存在tab標簽，則激活后一個tab標簽頁li_active.next().find("a").click();    }  }//關閉TAB$("#" + li_id).remove();$("#tab-content-" + id).remove(); // 移除內容}/** * 設置tab標簽對應的iframe頁面高度 */function changeFrameHeight(){var iframes = document.getElementsByName('tabIframe');var contentContainer= $('#' + tabContentID); // 獲取tab標簽對應的頁面div容器對象 // 可能會出現獲取不到的情況var offsetTop= 0;if(contentContainer.offset()) {offsetTop= contentContainer.offset().top; //容器距離document頂部的距離}$.each(iframes, function(index, iframe){var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;iframe.height= h - offsetTop;// 這里offsetTop可以替換成一個比較合理的常量值  });}/*** 瀏覽器窗口大小發生變化時，自動調整iframe頁面高度* 瀏覽器等因素導致改變瀏覽器窗口大小時，會發生多次resize事件，導致頻繁調用changeFrameHeight()，* 所以函數中添加了延遲事件*/$(function(){var resizeTimer= null;window.onresize=function(){if(resizeTimer) {clearTimeout(resizeTimer); // 取消上次的延遲事件}resizeTimer= setTimeout('changeFrameHeight()', 500); // //延遲500毫秒執行changeFrameHeight方法}});