[英]Loading content on tab click
I recently found a cool tabbed content page, where when you click on the tabs they show content http://codepen.io/unasAquila/pen/nDjgI What I discovered was, that these tabs were preloaded once you enter the page, rather than being loaded as the tabs are clicked on. 我最近发现了一个很酷的选项卡式内容页面,当您单击这些选项卡时,它们会显示内容http://codepen.io/unasAquila/pen/nDjgI我发现的是,这些选项卡是在您进入该页面后预先加载的,而不是在单击选项卡时被加载。 I was wondering if it is possible to make it to where the content loads as you click on the tab.
我想知道是否有可能在单击选项卡时将其加载到内容加载的位置。 For example, If I have a PHP Query statement where I want to load information such as this:
例如,如果我有一个PHP Query语句要在其中加载如下信息:
$query3 = $db->query("SELECT * FROM mybb_game WHERE id='" . $id . "'");
while($row = mysqli_fetch_array($query3))
{
echo "$row[name]
}
How would I make it to where the content is only loaded once the tab is clicked on? 如何将其设置为仅在单击选项卡后才将内容加载到的位置?
It can be done using AJAX . 可以使用AJAX完成。 Simply put, AJAX is a technology that allows sending requests to the back-end when an event triggers on the front-end.
简而言之,AJAX是一种允许事件在前端触发时将请求发送到后端的技术。
You could make the following: 您可以进行以下操作:
In your HTML: 在您的HTML中:
<!-- Change myTabId to whatever id you want to send to the server side -->
<element onclick="loadTab(myTabId)">my tab</element>
In your JS: 在您的JS中:
// Will be executed on tab click
function loadTab(tabId) {
var xmlhttp = new XMLHttpRequest();
// Define a handler for what to do when a reply arrives from the server
// This function will not be executed on tab click
xmlhttp.onreadystatechange = function() {
// What to do with server response goes inside this if block
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// Change the content of the element with id "myTabContent" to the server reply
document.getElementById("myTabContent").innerHTML = xmlhttp.responseText;
}
}
// Opens a connection to "myServerSideScript.php" on the server
xmlhttp.open("GET", "myServerSideScript.php?id=" + tabId, true);
xmlhttp.send();
}
Now you need to create myServerSideScript.php
on the server root with a content similar to the following: 现在,您需要在服务器根目录上创建
myServerSideScript.php
,其内容类似于以下内容:
$id = $GET[id]; //The GET parameter we sent with AJAX
$query3 = $db->query("SELECT * FROM mybb_game WHERE id='" . $id . "'");
$response = "";
while ($row = mysqli_fetch_array($query3)){
$response .= $row[name];
}
// To return a reply you just need to print it
// And it will be assigned to xmlhttp.responseText on the client side
echo $response;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.