基于Bootstrap和JQuery如何实现动态打开和关闭tab页-古蔺大橙子建站
RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
基于Bootstrap和JQuery如何实现动态打开和关闭tab页

小编给大家分享一下基于Bootstrap和JQuery如何实现动态打开和关闭tab页,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联从2013年开始,先为福山等服务建站,福山等地企业,进行企业商务咨询服务。为福山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

1.   测试环境

JQuery-3.2.1.min.j

Bootstrap-3.3.7-dist

win7

1.2.   实践

HTML代码片段








  项目管理
  项目管理1   项目管理2

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) { // 如果关闭的是当前处于选中状态的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是什么

Bootstrap是目前最受欢迎的前端框架,它是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,它还有一个响应最好的Grid系统,并且能够在手机端通用,而Bootstrap是使用许多可重用的CSS和JavaScript组件,可以帮助实现需要的几乎任何类型的网站的功能,此外,所有这些组件都是响应式的。

以上是“基于Bootstrap和JQuery如何实现动态打开和关闭tab页”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


文章题目:基于Bootstrap和JQuery如何实现动态打开和关闭tab页
地址分享:http://scgulin.cn/article/gcjesh.html

其他资讯