Question

这是我的HTML：

<div id="tabpanes" style="display: none;">

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" href="#profile" role="tab" data-toggle="tab">Klantgegevens</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#buzz" role="tab" data-toggle="tab">Documenten</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#references" role="tab" data-toggle="tab">...</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="profile">

  </div>
  <div role="tabpanel" class="tab-pane fade" id="buzz">...</div>
  <div role="tabpanel" class="tab-pane fade" id="references">...</div>
</div>

</div>

这是我的jquery代码：

function klantdetails(id = null) {

    if(id){

        $("#tabpanes").show();
        $("#profile").load("php/getklantinfo.php", "id=id");


    }


}

当调用该函数时，似乎没有任何事情发生。但是，如果我单击另一个导航链接，然后返回到第一个链接，则会在#profile选项卡窗格中加载内容。是什么原因导致它不能立即显现？

Answer 1

通过从第一个tabpanel中删除淡入淡出类来解决。

在Bootstrap nav-tabs中动态加载内容

1 个答案: