<div class="container-fluid">
<div class="row">
<!--添加左側(cè)菜單欄 -->
<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>&nbsp;&nbsp;項(xiàng)目管理<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':'項(xiàng)目管理1', 'tabContentID':'tabContent', 'tabUrl':'/testulr'})"><iclass="glyphiconglyphicon-cog"></i>&nbsp;&nbsp;項(xiàng)目管理1</a></li>
<li class="active"><a href="#" onclick="addTab({'menuID':'22', 'father':'navtab', 'tabName':'項(xiàng)目管理2', 'tabContentID':'tabContent', 'tabUrl':''})"><iclass="glyphiconglyphicon-cog"></i>&nbsp;&nbsp;項(xiàng)目管理2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--添加tab頁(yè)面 -->
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
<ulid="navtab" class="navnav-tabs">
<!--通過js獲取 tab-->
</ul>
<!-- tab頁(yè)面的內(nèi)容 -->
<div id="tabContent" class="tab-content">
<!--通過js獲取 tab對(duì)應(yīng)的頁(yè)面內(nèi)容-->
</div>
</div>
</div>
</div>
</body>
</html>

/**
 * 增加tab標(biāo)簽頁(yè)
 * @param options：
 * menuIDtab標(biāo)簽頁(yè)對(duì)應(yīng)的左側(cè)導(dǎo)航菜單在數(shù)據(jù)庫(kù)表中的id，作為tab元素id的組成部分
 * tabName    tab標(biāo)簽頁(yè)名稱
 * tabUrl    tab“裝載”的url
 * tabContentID tab標(biāo)簽頁(yè)的頁(yè)面內(nèi)容所在的父級(jí)元素（div容器）
 *
 * @returns {boolean}
 */
function addTab(options) {
setBreadcrumb(options.level1, options.level2, options.tabName);
//tabUrl:當(dāng)前tab所指向的URL地址
varisExists= isTabExists(options.menuID);
if(isExists){ // 如果tab標(biāo)簽頁(yè)已打開，則選中、激活
$("#tab-a-" + options.menuID).click(); // 注意，必須是點(diǎn)擊 a標(biāo)簽才起作用
} else {
// 新增 tab 標(biāo)簽頁(yè)
    //按鈕圖標(biāo) '<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>');
// 設(shè)置 tab標(biāo)簽頁(yè)的內(nèi)容
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(); // 選中打開的tab
currentIframID= 'iframe' + options.menuID;
  }
}
 
/***
 * 判斷tab頁(yè)是否已經(jīng)打開
 * @paramtabName當(dāng)前tab的名稱
 * @returns {boolean}
 */
function isTabExists(menuID){
var tab = $('#tab-li-' + menuID + ' > #tab-a-' + menuID);
return tab.length>0;
}
/**
 * 關(guān)閉tab標(biāo)簽頁(yè)
 * @param button
 */
function closeTab(button) {
//通過所點(diǎn)擊的x 按鈕，找到對(duì)應(yīng)li標(biāo)簽的id
var 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) { // 如果關(guān)閉的是當(dāng)前處于選中狀態(tài)的TAB
if (li_active.prev()[0]) { // 如果當(dāng)前tab標(biāo)簽之前存在tab標(biāo)簽，則激活前一個(gè)標(biāo)簽頁(yè)（前后順序?qū)?yīng)左右順序
li_active.prev().find("a").click();
    } else if (li_active.next()[0]) { // 如果當(dāng)前tab標(biāo)簽之前不存在tab標(biāo)簽，并且在其之后存在tab標(biāo)簽，則激活后一個(gè)tab標(biāo)簽頁(yè)
li_active.next().find("a").click();
    }
  }
//關(guān)閉TAB
$("#" + li_id).remove();
$("#tab-content-" + id).remove(); // 移除內(nèi)容
}
/**
 * 設(shè)置tab標(biāo)簽對(duì)應(yīng)的iframe頁(yè)面高度
 */
function changeFrameHeight(){
var iframes = document.getElementsByName('tabIframe');
var contentContainer= $('#' + tabContentID); // 獲取tab標(biāo)簽對(duì)應(yīng)的頁(yè)面div容器對(duì)象 // 可能會(huì)出現(xiàn)獲取不到的情況
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可以替換成一個(gè)比較合理的常量值
  });
}
/**
* 瀏覽器窗口大小發(fā)生變化時(shí)，自動(dòng)調(diào)整iframe頁(yè)面高度
* 瀏覽器等因素導(dǎo)致改變?yōu)g覽器窗口大小時(shí)，會(huì)發(fā)生多次resize事件，導(dǎo)致頻繁調(diào)用changeFrameHeight()，* 所以函數(shù)中添加了延遲事件
*/
$(function(){
var resizeTimer= null;
window.onresize=function(){
if(resizeTimer) {
clearTimeout(resizeTimer); // 取消上次的延遲事件
}
resizeTimer= setTimeout('changeFrameHeight()', 500); // //延遲500毫秒執(zhí)行changeFrameHeight方法
}
});