我的專案中有 10 個選項卡，每個選項卡都將使用 PHP 從 API 中獲取一些值。
每次加載頁面需要 10-15 秒（因為它更新了所有 10 個選項卡的值）
如何僅在切換選項卡后加載內容？
在開始時加載 TAB1，然后只有在點擊 TAB2 或 TAB3 后才 加載它們的內容，但不要在開始時加載它們
示例：https : //jsfiddle.net/t52mwLoc/
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Default Tab</h4>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="nav-link active show" data-toggle="tab" href="#tab1" role="tab" aria-selected="true">TAB1</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-selected="false"> TAB2</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-selected="false"><span class="hidden-sm-up"> TAB3</a> </li>
</ul>
<!-- Tabs -->
<div class="tab-content tabcontent-border">
<div class="tab-pane active show" id="tab1" role="tabpanel">
<div class="p-20">
Load this content... [TAB1]
</div>
</div>
<div class="tab-pane p-20" id="tab2" role="tabpanel">some PHP... Load this ONLY after clicking [TAB2]</div>
<div class="tab-pane p-20" id="tab3" role="tabpanel">some PHP... Load this ONLY after clicking [TAB3]</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>uj5u.com熱心網友回復：
你可以做的一些簡單的事情就是這樣。現場示例在這里
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function initialLoad(){
$('#loader').load("page1.php");
}
</script>
</head>
<body onload="initialLoad()">
Click on buttons to load different pages <br/>
<button style="margin-left: 20px" class="btn btn-primary" onclick="load(1)"> Page 1 </button>
<button style="margin-left: 20px" class="btn btn-primary" onclick="load(2)"> Page 2 </button>
<button style="margin-left: 20px" class="btn btn-primary" onclick="load(3)"> Page 3 </button>
<button style="margin-left: 20px" class="btn btn-primary" onclick="load(4)"> Page 4 </button>
<button style="margin-left: 20px" class="btn btn-primary" onclick="load(5)"> Page 5 </button><br/><br/>
<div class="load" id="loader">
</div>
<h3>You can check the network tab to see which page is getting loaded</h3>
<script>
function load(page){
var thePage = "page" page ".php"
$('#loader').load(thePage);//assuming u have page1.php page2.php like this
}
</script>
</body>
</html>
如有任何疑問，請評論。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/370034.html
標籤：javascript php 查询 阿贾克斯