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

Question

I would like to replicate this site's glossary function: https://www.mortgageloan.com/finance-glossary-terms

Objective: Click on a letter and content corresponding to that letter will be shown. Click on another letter, and only the clicked letter's content is shown.

I have my dictionary.php file with an array setup like this:

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

I can display the Terms and Definitions fine with a foreach loop, but it displays all the terms and definitions. How can I display the terms and definitions pertaining to only their corresponding letters when the user clicks on that letter?

Answer 1

The site you linked doesn't seem to use AJAX like @JeremyE suggests. It just loads a bunch of "tabs" (one for each letter) and then lets you switch between them as demonstrated here. It still loads all the data at once, just hides parts.

The Menu Bar

This loops through each letter in $dictionary and adds it as a button

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

The Tabs:

This generates a tab for each letter in $dictionary and then creates a paragraph for each term within that.

<?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 to add functionality

This JS function simply shows a tab with a certain ID, and hides all the others. It's called by the buttons inside the Menu.

<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>

This gives you the basic structure of how it's done.