[英]Is it possible to refresh a tab on click - Bootstrap tabs
我创建了两个选项卡,使用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),所以插入后,我必须刷新整个页面才能查看标签二上的更新数据。
那么是否可以在我在标签二上插入数据后立即刷新标签二,这样我就可以在不刷新整个页面的情况下查看更新的数据? 如果这已经解决,请评论答案链接。
它可能看起来很粗糙,但我使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.