同一页面中的多个帖子部分

时间:2017-04-11 14:43:40

标签: php html css

来自像这样的数据库

  [                   POSTS                 ]
  |  id  |     title    |    part1    |    part2    |    part3    |
  |------|--------------|-------------|-------------|-------------|
  |  1   |      ST1     |   storyp1   |   storyp1   |   storyp1   |
  |  2   |      ST2     |   storyp2   |   storyp2   |   storyp2   |
  |  3   |      ST3     |   storyp3   |   storyp3   |   storyp3   |
  |  4   |      ST4     |   storyp4   |   storyp4   |   storyp4   |
  __________________________________________

如何在点击按钮时将页面分成3个部分?

<?php
$query = "SELECT * FROM posts WHERE id = :id";
 $stmt = $conn->prepare($sqlFetch);
    $stmt->execute([':id' => $id]);
    $row = $stmt->fetch()
      $title = $row['title'];
      $part1 = $row['part1'];
      $part1 = $row['part2'];
      $part1 = $row['part3'];
?>


    <body>
        <h1 class="title">
            <?php echo $title; ?>
        </h1>
        <button>part1</button>
        <button>part2</button>
        <button>part3</button>

        <div class="part1">
            <?php echo $part1; ?>
        </div>
        <div class="part2">
            <?php echo $part2; ?>
        </div>
        <div class="part3">
            <?php echo $part3; ?>
        </div>
    </body>

我考虑过使用CSS display: none;,但无法弄清楚如何触发按钮,是否有可能使用PHP来做到这一点?我也考虑过Radio buttons但我认为这不是最佳方式。

1 个答案:

答案 0 :(得分:0)

我认为这会对你有所帮助: 首先创建 GetData.php

<?php
$q = ($_GET['q']);
include_once 'DbConnection.php'; //This is your connection
$Query = "SELECT * FROM posts WHERE id='$q'";
$Result = mysqli_query($Link, $Query);
while ($Rows = mysqli_fetch_assoc($Result))
{
$title = $Rows['title'];
$part1 = $Rows['part1'];
$part2 = $Rows['part2'];
$part3 = $Rows['part3'];
echo "<div class='part1'>$part1</div>";
echo "<div class='part2'>$part2</div>";
echo "<div class='part3'>$part3</div>";
}
?>

现在创建 index.php

<html>
<head><title>Show the result</title>
<script>
function ShowResult(str)
{
    if (str == "") {
        return;
    }
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    } else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("DisplayData").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","GetData.php?q="+str,true);
    xmlhttp.send();
}
</script>
</head>
<body>
<div>
<input type="text" id="txtSearch" onkeyup="ShowResult(this.value); onblur="ShowResult(this.value);"/>
<div>
<div id="DisplayData"></div>
</body>
</html>

如果你想通过Button事件这样做,你需要传输id的表单并从服务器返回数据。如果您需要,也可以发表评论或收件箱。