2
回答
bootStrap-addTabs 的问题
华为云4核8G,高性能云服务器,免费试用   

中间部分是按钮,代码是:

<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又不好  所以看起来老费劲了,@自由自在的小鱼

希望帮忙。


举报
weir2016
发帖于2年前 2回/3K+阅
顶部