Question

Usign AngularJS和bootsrap 3.我有3个导航选项卡，上面有面板。如果用户未选择客户或DVD，我如何以编程方式防止将选项卡更改为下一个选项卡。在bot上，customerSelect和dvdSelect标签的面板上有一个带有列表的面板，用户可以在其中选择客户以及dvds列表。

<div class="row">
    <div class="panel panel-default">
        <ul class="nav nav-tabs">
            <li class="active in"><a data-target="#customerSelect" data-toggle="tab">Customer</a></li>
            <li><a data-target="#dvdSelect" data-toggle="tab">Dvd List</a></li>
            <li><a data-target="#orderDetail" data-toggle="tab">Order Details</a></li>
        </ul>
    </div>
</div>
    <div class="row">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="customerSelect">
            </div>
        </div>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade" id="dvdSelect">
            </div>
        </div>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade" id="orderDetail">
            </div>
        </div>
    </div>

我已经省略了标签内容div中的许多代码。

Answer 1

使用JQuery时，bootstrap选项卡有4个不同的事件：

show.bs.tab // Occurs when the tab is about to be shown.    
shown.bs.tab  //  Occurs when the tab is fully shown (after CSS transitions have completed)  
hide.bs.tab // Occurs when the tab is about to be hidden   
hidden.bs.tab  // Occurs when the tab is fully hidden (after CSS transitions have completed)

您可以使用的伪示例：

$('.nav-tabs a').on('show.bs.tab', function(){
console.log('validation starts...');
if (correct!==true){
    $('#tab1').tab('show');
}else{
    $('#tab2').tab('show');
 }
});

在更改时对引导导航选项卡进行验证

1 个答案: