禁用?
原来设想的是两个tab的包含体内分别放不同的内容,后来发现,比如:擂台活动和专题里都有id,name相同的input属性输入框,在其中一个添加了,在另一个同样会显示出来,最后干脆在各自的包含体内啥都不放,直接放在tab外面,在js里通过div的id来根据不同tab需要设置不同div的显示与隐藏的内容,html代码如下:
<div class="tabbable"> <ul class="nav nav-tabs" id="myTab"> <li id="tabli_1"> <a href="#tab_1" data-toggle="tab" onclick="javascript:setLocation(1);"> 擂台活动 </a> </li> <li id="tabli_2"> <a href="#tab_2" data-toggle="tab" onclick="javascript:setLocation(2);"> 专题 </a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_1" /> <div class="tab-pane" id="tab_2" /> </div> </div> <!-- ------------------------------------------------------------------------------------------ --> <div class="form-group"> <div class="row"> <label class="col-md-3 control-label">文章编号</label> <div class="col-md-3"><form:input path="articleId" class="form-control" readonly="true"/></div> </div> </div> <div class="form-group" id="timeinput"> <div class="row"> <label class="col-md-3 control-label">发布时间</label> <div class="col-md-3"> <form:input path="releaseTime" class="form-control form-control-inline form_date" autocomplete="off" placeholder="发布时间"></form:input> <form:errors path="releaseTime" class="field-has-error"></form:errors> </div> <label class="col-md-1 control-label">下线时间</label> <div class="col-md-3"> <form:input path="offlineTime" class="form-control form-control-inline form_date" autocomplete="off" placeholder="下线时间"/> <form:errors path="offlineTime" class="field-has-error"></form:errors> </div> </div> </div>
js代码:
style="display: none;"
document.getElementById("timeinput").style.display="";
给 Tabs 实例绑定一个 show.bs.tab 事件,阻止默认行为就可以禁止切换了
$('a[href="#tab_2"]').on('show.bs.tab', function(e) { e.preventDefault(); });
正解!赞一个!