Question

我有一个奇怪的问题。当我使用Bootstrap 3时，这样做没有问题。

我有一个带有两个标签的页面。 Tab1当前处于活动状态，而Tab2被禁用。仅当将数据输入到Tab1中并通过Submit按钮提交时，Tab2才启用。 Tab2应该在..p中显示动态生成的内容。

请注意，使用Bootstrap 3时，我这样做没有问题。但是，对于Bootstrap 4，发生的事情是提交了数据并显示了Tab2，但是Tab2仍显示Tab1的内容。如果我单击Tab1，然后单击Tab2，现在将显示动态生成的内容。

我为此使用的javascript是（假设'ria'是表单的ID，'ria_result'是Tab2中包含div的ID）：

            var formData = $('#ria').serialize();

            $.post('ria.php', formData,

             function(data){
                     $('#ria_result').html(data);
                    $('.nav-tabs li:eq(1) a').removeClass('disabled');
         $('.nav-tabs li:eq(0) a').removeClass('active');
         $('.nav-tabs li:eq(1) a').addClass('active');
         $('.nav-tabs li:eq(1) a').tab('show');
                    });

标签的html是：

<div class="col-12" id="tabs">
<ul class="nav nav-tabs" id="riatab" role="tablist">

 <li class="nav-item"><a href="#tab1" data-toggle="tab" class="nav-link active" role="tab">Details</a></li>
 <li class="nav-item"><a href="#tab2"  data-toggle="tab" class="nav-link disabled" role="tab">Results</a></li>

  <div class="tab-pane show in active" id="tab1" role="tabpanel">
    ....form content.....
  </div>

<div class="tab-pane"  id="tab2" role="tabpanel">
    <div id="ria_result" name="ria_result"></div>
</div>
</div>
</div>

我正在努力寻找我在这里想念的东西。有什么建议吗？

谢谢尼尔

$ .post事件后激活Bootstrap 4选项卡

0 个答案: