如何基于链接动态显示php内容

我想复制此网站的术语表功能：

目标：单击一封信，将显示与该信对应的内容。单击另一封信，仅显示单击的信的内容

我的dictionary.php文件具有如下数组设置：

$dictionary = array(
    'A'=>array(
        'Term1'=>'Definition1',
        'Term2'=>'Definition2',
    ),
    'B'=>array(
        'Term1'=>'Definition1',
        'Term2'=>'Definition2',
    ),
);

---

我可以使用foreach循环很好地显示术语和定义，但它显示所有术语和定义。当用户单击相应的字母时，我如何显示仅与该字母相关的术语和定义？

我不确定您如何称呼该字母，因此可能需要根据呼叫调整我的答案，但是，如果您向dictionary.php文件发送一个AJAX请求，其中包含有关所单击字母的信息，那么php文件的外观可能如下（以简单的方式）：

如果您当前没有向php文件发送任何信息（这是可能的，因为您说您只是在遍历他们的整个字典），那么您需要使用一个称为AJAX请求的东西，以便向php文件提供有关单击哪个字母的信息。在jQuery中看起来是这样的：

let letterClicked = "A"  // Change this to the location of the letter information in the clicked element (could be element.value or element.innerhtml)

$.get("dictionary.php", { letter: letterClicked }, function ( data ) {
     // Do something with the data that is returned
})

---

我希望这有帮助！如果您有关于这个问题的更多信息，请告诉我，这将有助于完善我的答案。

您链接的站点似乎不像@JeremyE建议的那样使用AJAX。它只是加载一堆“标签”（每个字母对应一个标签），然后让您在它们之间切换，如图所示。它仍然一次加载所有数据，只是隐藏部分

菜单栏 这将遍历

$dictionary

中的每个字母，并将其添加为按钮

<div>
    <?php foreach($dictionary as $letter => $terms) { ?>
        <button onclick="openTab('<?= $letter ?>')"><?= $letter ?></button>
    <?php } ?>
</div>

JS添加功能 这个JS函数只显示一个具有特定ID的选项卡，并隐藏所有其他选项卡。它由菜单中的按钮调用

<script>
function openTab(tab) {
    var i;
    var x = document.getElementsByClassName("tab");

    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }

    document.getElementById(tab).style.display = "block";
}
</script>

函数openTab（tab）{
var i；
var x=document.getElementsByClassName（“选项卡”）；
对于（i=0；i

---

这将为您提供如何完成的基本结构。

这太棒了！我已经查看了您提供的w3schools链接，我的代码也可以使用，但是当前发生的情况是，当我单击一个字母以显示其词汇表时，只有第一个单词设置为“block”，而该字母下的其他单词设置为“none”.@the_fez您不应该在任何术语上设置

display

，您只需要为其周围的选项卡设置它，我没有在术语上设置显示。我在上面的术语周围有一个标签id，但由于某些原因，只显示了一个定义。当我检查Chrome中的元素时，其他术语被设置为“无”。@the_fex可能在其他地方（不在你的问题中）添加了

display=“none”

。我发布的代码对我有用（只是再试一次）。我是个白痴我在嵌套的for循环中使用了外部div，而不是：

outer div>for循环>div w/terms和def

。非常感谢你的帮助！谢谢你的帮助！我调用dictionary.php文件，只需执行一个“include”并使用foreach循环遍历术语和定义。我听说过AJAX，也看过一点，但我正在寻找更简单的东西。再次感谢！是的，正如@Xuzrus所指出的，我对您想要的东西的理解有点离谱，我马上想到了如何从dictionary.php文件中接收正确的信息（只接收一组术语，而不是所有的集合），而不是如何单独存储所有信息（并显示）。我很高兴你得到了一些帮助并找到了答案：）

<?php foreach($dictionary as $letter => $terms) { ?>

    <div class="tab" id="<?= $letter ?>" style="display: none;">

        <?php foreach($terms as $term => $def) { ?>
            <p><?= $term . " is: " . $def;?></p>
        <?php } ?>

    </div>
<?php } ?>

<script>
function openTab(tab) {
    var i;
    var x = document.getElementsByClassName("tab");

    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }

    document.getElementById(tab).style.display = "block";
}
</script>