我想复制这个网站的词汇表功能：https : //www.mortgageloan.com/finance-glossary-terms
目的：点击一个字母，会显示该字母对应的内容。点击另一个字母，只显示点击字母的内容。
我的 dictionary.php 文件的数组设置如下：
$dictionary = array(
'A'=>array(
'Term1'=>'Definition1',
'Term2'=>'Definition2',
),
'B'=>array(
'Term1'=>'Definition1',
'Term2'=>'Definition2',
),
);
我可以用 foreach 循环很好地显示术语和定义，但它显示所有术语和定义。当用户单击该字母时，如何仅显示与其对应字母相关的术语和定义？
您链接的网站似乎不像@JeremyE 建议的那样使用 AJAX。它只是加载了一堆“标签”（每个字母），然后让你作为证明它们之间进行切换这里。它仍然一次加载所有数据，只是隐藏部分。
这会遍历每个字母$dictionary并将其添加为按钮
<div>
<?php foreach($dictionary as $letter => $terms) { ?>
<button onclick="openTab('<?= $letter ?>')"><?= $letter ?></button>
<?php } ?>
</div>
这会为每个字母生成一个选项卡$dictionary，然后为其中的每个术语创建一个段落。
<?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 } ?>
此 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>
这为您提供了如何完成的基本结构。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句