在Bootstrap Nav选项卡上对更改进行验证

Question

usign angularjs和bootsrap 3.我有3个nav-tabs，并且面板上有面板。如果用户未选择客户或DVD，则如何以编程性防止选项卡更改为下一个标签。在bot上，客户选择和DVDSELECT选项卡的i有一个带有一个列表的面板，用户选择客户anmd也是DVD的列表。

<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有4个不同的事件用于Bootstrap选项卡：

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');
 }
});