JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page-links">
        <a class="plink" href="#page1">About</a>
        <a class="plink" href="#page2">History</a>
        <a class=" plink" href="#page3">Backstage</a>
</div>
<div id="page1">
    Content 1
</div>
<div id="page2">
    Content 2
</div>
<div id="page3">
    Content 3
</div>

JavaScript

jQuery(function ($) {
    var pages = [];
    function showPage(page) {
        var i;
        for(i = 0; i < pages.length; i++)
        {
            if(page === pages[i]) {
                $(pages[i]).show();
            } else {
                $(pages[i]).hide();                       
            }
        }            
    }
    
    // Store each href in a pages array and add handlers
    $('.plink').each( function() {
       var page = $(this).attr('href');
       pages.push(page);
       $(this).attr('href', '#');
       $(this).click(function () {  
           showPage(page);
       });
    });
    
    // show the first page
    if(pages.length > 0) {
       showPage(pages[0]);
    }
});