Bootstrap3.3 动态添加和关闭 tab的方案

最新推荐文章于 2024-08-22 16:58:12 发布

转载最新推荐文章于 2024-08-22 16:58:12 发布 · 4.8k 阅读

bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种网页中实现标签页增加和关闭功能的方法。通过JavaScript代码实现了检查标签页是否存在、添加新标签页及关闭指定标签页等功能。特别针对iframe元素的高度自适应进行了处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**

  * 增加标签页

  */

 function addTab(options) {

     //option:

     //tabMainName:tab标签页所在的容器

     //tabName:当前tab的名称

     //tabTitle:当前tab的标题

     //tabUrl:当前tab所指向的URL地址

     var exists = checkTabIsExists(options.tabMainName, options.tabName);

     if(exists){

         $("#tab_a_"+options.tabName).click();

     } else {

         $("#"+options.tabMainName).append('<li id="tab_li_'+options.tabName+'"><a href="#tab_content_'+options.tabName+'" data-toggle="tab" id="tab_a_'+options.tabName+'"><button class="close closeTab" type="button" onclick="closeTab(this);">×</button>'+options.tabTitle+'</a></li>');

         //固定TAB中IFRAME高度

         mainHeight = $(document.body).height() - 5;

         var content = '';

         if(options.content){

             content = option.content;

         } else {

             content = '<iframe src="' + options.tabUrl + '" width="100%" height="'+mainHeight+'px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>';

         }

         $("#"+options.tabContentMainName).append('<div id="tab_content_'+options.tabName+'" role="tabpanel" class="tab-pane" id="'+options.tabName+'">'+content+'</div>');

         $("#tab_a_"+options.tabName).click();

     }

 }

 /**

  * 关闭标签页

  * @param button

  */

 function closeTab (button) {

     //通过该button找到对应li标签的id

     var li_id = $(button).parent().parent().attr('id');

     var id = li_id.replace("tab_li_","");

     //如果关闭的是当前激活的TAB，激活他的前一个TAB

     if ($("li.active").attr('id') == li_id) {

         $("li.active").prev().find("a").click();

     }

     //关闭TAB

     $("#" + li_id).remove();

     $("#tab_content_" + id).remove();

 };

 /**

  * 判断是否存在指定的标签页

  * @param tabMainName

  * @param tabName

  * @returns {Boolean}

  */

 function checkTabIsExists(tabMainName, tabName){

     var tab = $("#"+tabMainName+" > #tab_li_"+tabName);

     //console.log(tab.length)

     return tab.length > 0;

 }