首页新闻找找看学习计划

bootstrap的tab如何禁止打开或切换呢

0
悬赏园豆:10 [待解决问题]

现在有个tab,要求只能打开指定的tab,或禁止切换,js该怎么写

拥抱天空的风的主页 拥抱天空的风 | 初学一级 | 园豆:117
提问于:2015-11-02 16:54
< >
分享
所有回答(3)
0

禁用?

Firen | 园豆:5483 (大侠五级) | 2015-11-09 21:08
0

原来设想的是两个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="";
拥抱天空的风 | 园豆:117 (初学一级) | 2015-11-14 23:34
0

给 Tabs 实例绑定一个 show.bs.tab 事件,阻止默认行为就可以禁止切换了

$('a[href="#tab_2"]').on('show.bs.tab', function(e) {
  e.preventDefault();
});
by.Genesis | 园豆:1602 (小虾三级) | 2015-11-20 17:15

正解!赞一个!

支持(0) 反对(0) pcfancy | 园豆:200 (初学一级) | 2016-05-26 16:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册