是否可以在单击时刷新选项卡 - 引导选项卡答案

【问题标题】：Is it possible to refresh a tab on click - Bootstrap tabs是否可以在单击时刷新选项卡 - 引导选项卡
【发布时间】：2021-04-06 21:37:44
【问题描述】：

我创建了两个选项卡，使用PHP 选项卡，一个用于将数据插入数据库，另一个用于查看数据库中的数据，有人建议使用 ajax，但我找不到我想要的答案。

示例代码-

<ul class="nav nav-tabs" role="tablist">

    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>

  </ul>

  <div class="tab-content">

    <div id="home" class="container tab-pane active">
   <?php require("insert.php"); ?>
    </div>
    <div id="menu1" class="container tab-pane fade">
     <?php require("view.php"); ?>
    </div>
    
  </div>

在标签一，我插入数据（PHP）和标签二我查看表中的数据（PHP），所以插入后，我必须刷新整个页面才能在标签二上查看更新的数据。

那么是否可以在我在标签二上插入数据后立即刷新标签二，这样我就可以在不刷新整个页面的情况下查看更新的数据？如果这已经解决，请评论答案链接。

【问题讨论】：

您必须为此使用 ajax。
@Ravinder Kumar 有没有类似的sn-ps，可以参考一下吗？

标签： php ajax bootstrap-4

【解决方案1】：

它可能看起来很粗糙，但我使用 JavaScript 使它工作。

$(document).ready(function(){
    
$(".t1").load("insert.php");
$(".t2").load("view.php");

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  
  if(target=='#home')
  {
  $(".t1").load("insert.php");
  }
  else if(target=='#profile')
  {
  $(".t2").load("view.php");
  }
});

});

<ul class="nav nav-tabs" role="tablist">

    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#profile">Menu 1</a>
    </li>

  </ul>

  <div class="tab-content">

    <div id="home" class="container tab-pane active t1">
   
    </div>
    <div id="profile" class="container tab-pane fade t2">
     
    </div>
    
  </div>

【讨论】：