1. 测试环境
JQuery-3.2.1.min.j
Bootstrap-3.3.7-dist
win7
1.2. 实践
HTML代码片段
<div> <div> <!--添加左侧菜单栏 --> <div> <div> <div> <div> <h4><a data-toggle="collapse" data-parent="#accordion" href="#tag20"><iclass="glyphiconglyphicon-cog"></i> 项目管理<span></span></a></h4> </div> <div> <div> <ulclass="navnav-list"> <li><a href="#"><iclass="glyphiconglyphicon-cog"></i> 项目管理1</a></li> <li><a href="#"><iclass="glyphiconglyphicon-cog"></i> 项目管理2</a></li> </ul> </div> </div> </div> </div> </div> <!--添加tab页面 --> <div> <ulid="navtab"> <!--通过js获取 tab--> </ul> <!-- tab页面的内容 --> <div> <!--通过js获取 tab对应的页面内容--> </div> </div> </div> </div> </body> </html>
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 标签页 //按钮图标 '<i></i></a>' $("#" + tabFatherElementID).append( '<li role="presentation">' + ' <a href="#tab-content-' +options.menuID + '" data-toggle="tab" role="tab">'+ options.tabName + '<button type="button"'" + options.level1 + "','" + options.level2 + "','" + options.tabName + "'" +');">×</button>' + '</a>' + '</li>'); // 设置 tab标签页的内容 var content = '<iframe src="' + options.tabUrl + '" frameborder="no" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>'; $("#" + options.tabContentID).append('<div role="tabpanel">' + content + '</div>'); $("#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) { // 如果关闭的是当前处于选中状态的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可以替换成一个比较合理的常量值 }); } /** * 浏览器窗口大小发生变化时，自动调整iframe页面高度 * 浏览器等因素导致改变浏览器窗口大小时，会发生多次resize事件，导致频繁调用changeFrameHeight()，* 所以函数中添加了延迟事件 */ $(function(){ var resizeTimer= null; window.onresize=function(){ if(resizeTimer) { clearTimeout(resizeTimer); // 取消上次的延迟事件 } resizeTimer= setTimeout('changeFrameHeight()', 500); // //延迟500毫秒执行changeFrameHeight方法 } });
总结
以上所述是小编给大家介绍的基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: