Question

我正在开发一个在bootstrap navtab中加载表单的应用程序。我有一个日期选择器，允许用户输入日期点击提交并更新navtab中的数据。我想要做的是允许用户选择日期，然后当单击选项卡时，它将使用该日期显示数据。就像现在一样，它只有在单击提交按钮时才有效。我知道我需要更改导航栏中的代码以匹配单击按钮时的操作，但我不知道该怎么做。这是我的导航栏：

<ul class="nav nav-tabs spiff_tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#home" aria-controls="home" role="tab" data-id="delayedspiff" data-toggle="tab" onclick="FormGet('dashboard/delayedspiff', 'delayedspiff')">Potential Spiff</a>

                    </li>
                    <li role="presentation">
                        <a href="#profile" aria-controls="profile" role="tab" data-id="instantspiff" data-toggle="tab" onclick="FormGet('dashboard/instantspiff', 'delayedspiff')">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>

按钮点击JavaScript：

<script>    
   $(".spiffdate-btn").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>

如何更改navtab Formget功能以匹配按钮单击formget功能？

Answer 1

将 spiffdate-btn 类应用于选项卡链接，以便它们也可以触发与提交按钮相同的功能而不使用onclick属性。您可以使用更通用命名的随机css类，并且不会将css应用于您的元素。

JavaScript在Bootstrap navtab上传递数据单击

1 个答案: