bootStrap-addTabs 的问题
中间部分是按钮，代码是：
<div class="content-wrapper">
<div class="row content-tabs">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active" id="tab_home">
<a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
</ul>
</div>
<div class="tab-content" >
<div role="tabpanel" class="tab-pane active" id="home">
<div id="main-content">
<div style="margin: 15px;" class="container-fluid">
<div class="row-fluid">
<div class="col-sm-4">
<div class="row-fluid">
<div style="margin-top:30px;"
class="col-sm-10 col-sm-offset-1 md module3">
<a title="救援队伍" url="resource/team/main" addtabs="20"
href="javascript:void(0);"> <span
class="icon fa fa-users"></span>
<div class="ca-content">
<h2 class="ca-main">救援队伍</h2>
<h3 class="ca-sub">救援队伍</h3>
</div></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row-fluid">
<div style="margin-top:30px;"
class="col-sm-10 col-sm-offset-1 md module1">
<a title="庇护场所" url="resource/shelter/main" addtabs="25"
href="javascript:void(0);"> <span
class="icon fa fa-book"></span>
<div class="ca-content">
<h2 class="ca-main">庇护场所</h2>
<h3 class="ca-sub">庇护场所</h3>
</div></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row-fluid">
<div style="margin-top:30px;"
class="col-sm-10 col-sm-offset-1 md module4">
<a title="物资分类" url="resource/suppliestype/main" addtabs="44"
href="javascript:void(0);"> <span
class="icon fa fa-sitemap"></span>
<div class="ca-content">
<h2 class="ca-main">物资分类</h2>
<h3 class="ca-sub">物资分类</h3>
</div></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row-fluid">
<div style="margin-top:30px;"
class="col-sm-10 col-sm-offset-1 md module5">
<a title="物资信息" url="resource/supplies/main" addtabs="45"
href="javascript:void(0);"> <span
class="icon fa fa-file"></span>
<div class="ca-content">
<h2 class="ca-main">物资信息</h2>
<h3 class="ca-sub">物资信息</h3>
</div></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row-fluid">
<div style="margin-top:30px;"
class="col-sm-10 col-sm-offset-1 md module5">
<a title="危险隐患管理" url="resource/danger/main" addtabs="49"
href="javascript:void(0);"> <span
class="icon fa fa-file"></span>
<div class="ca-content">
<h2 class="ca-main">危险隐患管理</h2>
<h3 class="ca-sub">危险隐患管理</h3>
</div></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row-fluid">
<div style="margin-top:30px;"
class="col-sm-10 col-sm-offset-1 md module1">
<a title="法律法规管理" url="resource/legal/main" addtabs="51"
href="javascript:void(0);"> <span
class="icon fa fa-book"></span>
<div class="ca-content">
<h2 class="ca-main">法律法规管理</h2>
<h3 class="ca-sub">法律法规管理</h3>
</div></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row-fluid">
<div style="margin-top:30px;"
class="col-sm-10 col-sm-offset-1 md module2">
<a title="物资存储" url="resource/suppliesstore/main"
addtabs="62" href="javascript:void(0);"> <span
class="icon fa fa-book"></span>
<div class="ca-content">
<h2 class="ca-main">物资存储</h2>
<h3 class="ca-sub">物资存储</h3>
</div></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row-fluid">
<div style="margin-top:30px;"
class="col-sm-10 col-sm-offset-1 md module5">
<a title="专家分类" url="resource/experttype/main" addtabs="64"
href="javascript:void(0);"> <span
class="icon fa fa-sitemap"></span>
<div class="ca-content">
<h2 class="ca-main">专家分类</h2>
<h3 class="ca-sub">专家分类</h3>
</div></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row-fluid">
<div style="margin-top:30px;"
class="col-sm-10 col-sm-offset-1 md module3">
<a title="专家信息" url="resource/expert/main" addtabs="65"
href="javascript:void(0);"> <span
class="icon fa fa-users"></span>
<div class="ca-content">
<h2 class="ca-main">专家信息</h2>
<h3 class="ca-sub">专家信息</h3>
</div></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>其中每个按钮是：<div class="col-sm-4"> <div class="row-fluid"> <div style="margin-top:30px;" class="col-sm-10 col-sm-offset-1 md module3"> <a title="专家信息" url="resource/expert/main" addtabs="65" href="javascript:void(0);"> <span class="icon fa fa-users"></span> <div class="ca-content"> <h2 class="ca-main">专家信息</h2> <h3 class="ca-sub">专家信息</h3> </div></a> </div> </div> </div>里面有个：
<a title="专家信息" url="resource/expert/main" addtabs="65" href="javascript:void(0);"> <span class="icon fa fa-users"></span> <div class="ca-content"> <h2 class="ca-main">专家信息</h2> <h3 class="ca-sub">专家信息</h3> </div></a>这个链接 点击之后 需要放在tabs上面的 现在用 bootStrap-addTabs 最新的 怎么做我就不会了 希望帮忙
还有 我对以前 早版本的做的改造也放上来：
var addTabs = function (obj) {
if(obj.id!=undefined && obj.id.substr(0,13)=="parentAddtabs"){
id = "tab_" + obj.id;
//console.info(id);
parent.$(".active").removeClass("active");
//如果TAB不存在，创建一个新的TAB
if (!$("#" + id)[0]) {
//固定TAB中IFRAME高度,根据需要自己修改
var height = parent.$(".content-wrapper").height()*0.92;
//mainHeight = window.screen.availHeight*0.55;
//创建新TAB的title
title = '<li role="presentation" id="tab_' + id + '"><a style="cursor: pointer;" href="javascript:void(0);" aria-controls="' + id + '" role="tab" data-toggle="tab" onclick="parentActive(this)"; >' + obj.title+'</a>';
//是否允许关闭
if (obj.close) {
title += ' <i class="close-tab glyphicon glyphicon-remove"></i>';
}
title += '</li>';
//是否指定TAB内容
if (obj.content) {
content = '<div role="tabpanel" class="content-main tab-pane" id="' + id + '">' + obj.content + '</div>';
} else {//没有内容，使用IFRAME打开链接
var url = obj.url;
if(obj.param != undefined && obj.param!=''){
url = url+'?pid='+obj.param;
}
content = '<div role="tabpanel" style="text-align:center;overflow: hidden;" class="tab-pane" id="' + id + '" name="' + id + '"><iframe id="' + id + '_iframe" name="' + id + '_iframe" src="' + url + '" width="99%" height="'+height+'" frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes"></iframe></div>';
}
//加入TABS
parent.$(".nav-tabs").append(title);
parent.$(".tab-content").append(content);
}
//激活TAB
parent.$("#tab_" + id).addClass('active');
parent.$("#" + id).addClass("active");
}else{
id = "tab_" + obj.id;
//console.info(id);
$(".active").removeClass("active");
//如果TAB不存在，创建一个新的TAB
// console.info(!$("#" + id)[0]);
if (!$("#" + id)[0]) {
//固定TAB中IFRAME高度,根据需要自己修改
var height = $(".content-wrapper").height()*0.92;
//mainHeight = window.screen.availHeight*0.7;
//创建新TAB的title
title = '<li role="presentation" id="tab_' + id + '"><a style="cursor: pointer;" href="javascript:void(0);" aria-controls="' + id + '" role="tab" data-toggle="tab" onclick="active(this);">' + obj.title+'</a>';
//是否允许关闭
if (obj.close) {
title += ' <i class="close-tab glyphicon glyphicon-remove" ></i>';
}
title += '</li>';
//是否指定TAB内容
if (obj.content) {
content = '<div role="tabpanel" class="tab-pane" id="' + id + '" >' + obj.content + '</div>';
} else {//没有内容，使用IFRAME打开链接
//console.info(id);
content = '<div role="tabpanel" class=" content-main tab-pane" id="' + id + '" name="' + id + '"><iframe id="' + id + '_iframe" name="' + obj.title + '" src="' + obj.url + '" width="99%" height="'+height+'" frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes"></iframe></div>';
}
//加入TABS
$(".nav-tabs").append(title);
$(".tab-content").append(content);
}
//console.info(content);
//激活TAB
$("#tab_" + id).addClass('active');
$("#" + id).addClass("active");
}
};
var closeTab = function (id) {
//如果关闭的是当前激活的TAB，激活他的前一个TAB
if ($("li.active").attr('id') == "tab_" + id) {
$("#tab_" + id).prev().addClass('active');
$("#" + id).prev().addClass('active');
}
//关闭TAB
$("#tab_" + id).remove();
$("#" + id).remove();
};
$(function () {
$("[addtabs]").click(function () {
addTabs({id: $(this).attr("addtabs"), title: $(this).attr('title'), url: $(this).attr('url'), close: true,param:$(this).attr('param')});
});
$(".nav-tabs").on("click", ".close-tab", function () {
id = $(this).prev("a").attr("aria-controls");
closeTab(id);
});
});
function tabs_init(){
$("[addtabs]").click(function () {
addTabs({id: $(this).attr("addtabs"), title: $(this).attr('title'), url: $(this).attr('url'), close: true,param:$(this).attr('param')});
});
}
function tabs_init2(tabs){
//console.info(tabs);
$("."+tabs).click(function () {
//console.info(11);
addTabs({id: $(this).attr("addtabs"), title: $(this).attr('title'), url: $(this).attr('url'), close: true,param:$(this).attr('param')});
});
}
/**
* 激活当前tab
*/
function active(tab){
$(".active").removeClass("active");
id = $(tab).attr("aria-controls");
$("#tab_" + id).addClass('active');
$("#" + id).addClass('active');
}
/**
* 激活当前父tab
*/
function parentActive(tab){
parent.$(".active").removeClass("active");
id = $(tab).attr("aria-controls");
parent.$("#tab_" + id).addClass('active');
parent.$("#" + id).addClass('active');
}
/**
* 激活hometab
*/
function homeActive(){
$(".active").removeClass("active");
$("#tab_home").addClass('active');
$("#home").addClass('active');
}
function tabs_open(the){
addTabs({id: $(the).attr("tab_id"), title: $(the).attr('title'), url: $(the).attr('url'), close: true,param:$(the).attr('param')});
}
function tabs_open2(id,title,url,param){
addTabs({id: id, title: title, url: url, close: true,param:param});
}
/**
* 刷新
* @param name 是iframe 的id
*/
function refresh(name){
parent.document.getElementById(''+name+'').contentWindow.location.reload(true);
}新版本 变动太大 我的js jquery又不好 所以看起来老费劲了，@自由自在的小鱼
希望帮忙。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
没怎么看明白你的需求，param是你增加的一个参数，具体是什么用途？你用了tabs嵌套吗？你将包含tabs的那一段也发给我
@自由自在的小鱼