1 /** 2 * 增加标签页 3 */ 4 function addTab(options) { 5 //option: 6 //tabMainName:tab标签页所在的容器 7 //tabName:当前tab的名称 8 //tabTitle:当前tab的标题 9 //tabUrl:当前tab所指向的URL地址 10 var exists = checkTabIsExists(options.tabMainName, options.tabName); 11 if(exists){ 12 $("#tab_a_"+options.tabName).click(); 13 } else { 14 $("#"+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>'); 15 16 //固定TAB中IFRAME高度 17 mainHeight = $(document.body).height() - 5; 18 19 var content = ''; 20 if(options.content){ 21 content = option.content; 22 } else { 23 content = '<iframe src="' + options.tabUrl + '" width="100%" height="'+mainHeight+'px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>'; 24 } 25 $("#"+options.tabContentMainName).append('<div id="tab_content_'+options.tabName+'" role="tabpanel" class="tab-pane" id="'+options.tabName+'">'+content+'</div>'); 26 $("#tab_a_"+options.tabName).click(); 27 } 28 } 29 30 31 /** 32 * 关闭标签页 33 * @param button 34 */ 35 function closeTab (button) { 36 37 //通过该button找到对应li标签的id 38 var li_id = $(button).parent().parent().attr('id'); 39 var id = li_id.replace("tab_li_",""); 40 41 //如果关闭的是当前激活的TAB,激活他的前一个TAB 42 if ($("li.active").attr('id') == li_id) { 43 $("li.active").prev().find("a").click(); 44 } 45 46 //关闭TAB 47 $("#" + li_id).remove(); 48 $("#tab_content_" + id).remove(); 49 }; 50 51 /** 52 * 判断是否存在指定的标签页 53 * @param tabMainName 54 * @param tabName 55 * @returns {Boolean} 56 */ 57 function checkTabIsExists(tabMainName, tabName){ 58 var tab = $("#"+tabMainName+" > #tab_li_"+tabName); 59 //console.log(tab.length) 60 return tab.length > 0;
closeTab中 $(button).parent().parent().attr('id') 这个我console.log() 得到得是unsigned,还有$("li.active").prev().find("a").click(); 这个也没激活,这个在哪找的啊
直接JS搞定。
这个jquery就有,bootstrap3里没有找到,但是bootstrap jquery里面应该有的