基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码

1.   测试环境

JQuery-3.2.1.min.j

Bootstrap-3.3.7-dist

win7

1.2.   实践

HTML代码片段

  项目管理




  项目管理1
  项目管理2

JS代码片段 

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;
  }
}
 

function isTabExists(menuID){
var tab = $('#tab-li-' + menuID + ' > #tab-a-' + menuID);
return tab.length>0;
}

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) { // 如果关闭的是当前处于选中状态的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(); // 移除内容
}

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可以替换成一个比较合理的常量值
  });
}

$(function(){
var resizeTimer= null;
window.onresize=function(){
if(resizeTimer) {
clearTimeout(resizeTimer); // 取消上次的延迟事件
}
resizeTimer= setTimeout('changeframeHeight()', 500); // //延迟500毫秒执行changeframeHeight方法
}
});

总结

以上所述是小编给大家介绍的基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！