引导导航选项卡不起作用答案

【问题标题】：Bootstrap navtabs not working引导导航选项卡不起作用
【发布时间】：2015-11-30 17:53:59
【问题描述】：

我有一个引导导航选项卡，它在每个选项卡的表格中显示数据。我还有一个日期选择器，可让您输入日期，单击提交，然后在选项卡中显示该日期的数据。我需要能够在选项卡之间切换并在日期选择器中输入日期以更新选项卡单击时的数据。我所做的工作，除了当我最初尝试从delayedspiff 选项卡切换到instantspiff 选项卡时，instantspiff 将无法工作，直到我输入日期并单击按钮上的提交。这是我的导航选项卡和按钮的代码：

<div class="row spiff-datepicksection">
                <div class="col-lg-6 pull-right">
                    <div class="col-sm-5 col-lg-offset-4">
                        <div class="form-group">
                            <div class="input-group date">
                                <input type="text" id="startDate" class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <input class="spiffdate-btn spiffdate" type="button" value="Submit" />
                    </div>
                </div>
            </div>


            <div class="row spiff_tabs_body">
                <!-- Nav tabs -->

                <ul class="nav nav-tabs spiff_tabs" role="tablist">
                    <li role="presentation" class="active">

                        <a href="#home" aria-controls="home" class="spiffdate" role="tab" data-id="delayedspiff" data-toggle="tab">Potential Spiff</a>


                    </li>
                    <li role="presentation">

                        <a href="#profile" class="spiffdate" aria-controls="profile" role="tab" data-id="instantspiff" data-toggle="tab">Instant Spiff</a>     

                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content" id="details">
                    <div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
                    <div role="tabpanel" class="tab-pane" id="instantspiff"></div>
                </div>
            </div>
        </div>
    </div>

这是我的点击事件。我正在尝试使用 spiffdate 类来使用选项卡开关上的点击事件。

<script>    
    $(".spiffdate").click(function () {
       var correctId = $("ul.spiff_tabs li.active a").attr('data-id');

       var endDate = $("#startDate").val();
       if (endDate == "") {

       } else {
           if (correctId == "delayedspiff")
           {
               FormGet('dashboard/delayedspiff?endDate=' + endDate, 'delayedspiff')


           } else if (correctId = "instantspiff") {
               FormGet('dashboard/instantspiff?endDate=' + endDate, 'delayedspiff')

           }           
       }     
   });   
</script>

【问题讨论】：

标签： javascript jquery twitter-bootstrap tabs datepicker

【解决方案1】：

这里可能发生的情况是，您的 click 函数实际上是在选项卡更改事件发生之前调用的。因此，在您执行其他操作之前，active 类尚未应用于新元素。

要解决这个问题，我会改为观看shown.bs.tab 事件。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    //do your code here now
});

【讨论】：

嗨 Ohgodwhy 这不起作用，因为那时我的按钮单击事件不起作用。是否可以在一个功能中同时执行选项卡单击和按钮单击？

【解决方案2】：

@Ohgodwhy 推荐的是检查选项卡切换事件的正确方法。但是由于您已将单击处理程序映射到提交按钮和选项卡，因此您需要正确处理调用。

你可以试试这个

var correctId;
var triggerFromTabs;

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    alert('Event From Tab');
        if($("#startDate").val().length) 
           populateData();                   
});

function populateData()
{
    alert('populate data');
    if (correctId == "delayedspiff")
           {
               $("#divData").html("Data For Delayed");             


           } else if (correctId == "instantspiff") {

               $("#divData").html("Data For Instant");

           }     
}


$(".spiffdate").click(function (e) {
       if($(this).data("id") != undefined)
       { 
           triggerFromTabs = true;
           correctId = $(this).data("id");
       }
       else
       {
           triggerFromTabs = false;
           correctId = $("ul.spiff_tabs li.active a").attr('data-id');
       }
       alert("Selected tab : " + correctId);
       if($("#startDate").val().length && !triggerFromTabs)   
         populateData();
   });

这是工作示例：http://jsfiddle.net/RxguB/201/

【讨论】：