加载内容点击

我最近发现一个很酷的标签内容页面，当你点击标签，他们表现出的内容http://codepen.io/unasAquila/pen/nDjgI我发现的是，一旦你进入的页面，这些标签被预装，而不是装的标签点击。我想知道是否可以在点击选项卡时将内容加载到内容的位置。举例来说，如果我有，我想加载信息，比如这个PHP查询语句：加载内容点击

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

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

我怎么会让它的地方，一旦标签被点击的内容只装？

来源

2015-02-07 RJC

关于代码问题的问题应该在问题本身**中提供相关代码**。了解如何制作[MCVE]（/ help/mcve），然后编辑您的问题以改进它。 – Sumurai8 2015-02-07 19:32:15

它可以通过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

来源

2015-02-07 20:14:30

加载内容点击

回答

相关问题