引导程序导航选项卡不工作

Bootstrap navtabs not working

本文关键字：工作 选项 导航 引导程序      更新时间：2023-09-26

我有一个引导导航选项卡，可以在每个选项卡的表中显示数据。我还有一个日期选择器，可以输入日期，单击提交，然后在选项卡中显示该日期的数据。我需要能够在选项卡之间切换，并在日期选择器中输入日期，以便在单击选项卡时更新数据。我所做的是有效的，只是当我最初尝试从delayedsiff选项卡切换到instantspiff选项卡时，instantspif在我输入日期并点击按钮提交之前不会起作用。这是我的导航标签和按钮代码：

<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来使用tab开关上的click事件。

<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>

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

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

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

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

你可以试试

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/

相关文章：