Question

我最近找到了一个很酷的选项卡式内容页面，当您点击选项卡时，他们会显示内容http://codepen.io/unasAquila/pen/nDjgI我发现的是，这些选项卡在您进入页面后被预加载，而不是作为选项卡加载点击。我想知道是否可以在单击选项卡时将其加载到内容加载的位置。例如，如果我有一个PHP Query语句，我想加载这样的信息：

 $query3 = $db->query("SELECT * FROM mybb_game WHERE id='" . $id . "'");

 while($row = mysqli_fetch_array($query3))
 {
    echo "$row[name]
 }

如何在单击选项卡时加载内容？

Answer 1

可以使用AJAX完成。简而言之，AJAX是一种技术，允许在前端触发事件时向后端发送请求。

您可以进行以下操作：

在您的HTML中：

<!-- Change myTabId to whatever id you want to send to the server side -->
<element onclick="loadTab(myTabId)">my tab</element>

在你的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();
}

现在，您需要在服务器根目录上创建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;

您可以详细了解AJAX here

在选项卡上单击加载内容

1 个答案: