JS代碼片段 

/**
 * 增加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 標簽頁
    //按鈕圖標 ''
$("#" + tabFatherElementID).append(
'' +
'  '+ options.tabName + '×' + '' +
'');
// 設置 tab標簽頁的內容
var content = '';
$("#" + options.tabContentID).append('' + content + '');
$("#tab-a-" + options.menuID).click(); // 選中打開的tab
currentIframID= '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標簽的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) { // 如果關閉的是當前處于選中狀態(tài)的TAB
if (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可以替換成一個比較合理的常量值
  });
}
/**
* 瀏覽器窗口大小發(fā)生變化時，自動調整iframe頁面高度
* 瀏覽器等因素導致改變?yōu)g覽器窗口大小時，會發(fā)生多次resize事件，導致頻繁調用changeFrameHeight()，* 所以函數中添加了延遲事件
*/
$(function(){
var resizeTimer= null;
window.onresize=function(){
if(resizeTimer) {
clearTimeout(resizeTimer); // 取消上次的延遲事件
}
resizeTimer= setTimeout('changeFrameHeight()', 500); // //延遲500毫秒執(zhí)行changeFrameHeight方法
}
});

Bootstrap是什么

Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷，它還有一個響應最好的Grid系統(tǒng)，并且能夠在手機端通用，而Bootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實現需要的幾乎任何類型的網站的功能，此外，所有這些組件都是響應式的。

以上是“基于Bootstrap和JQuery如何實現動態(tài)打開和關閉tab頁”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！