JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

div
{
    height: 300px;
}
div#page-links
{
    border:1px solid blue;
    height:auto;
}
div#page1
{
    background-color:blue;
}
div#page2
{
    background-color:green;
    display:none;
}
div#page3
{
    background-color:red;
    display:none;
}

JavaScript

$(document).ready(function() {
    $('a.plink').click(function() {
        var id = $.trim(this.className.replace('plink', ''));

        /*adding a "page" class to each of the page divs makes hiding the visible one a bit easier*/
        $('div.page').hide(); 
        
        $('div#' + id).show();
    });
});