JSFiddle - React, Tailwind, and code Playground

by Derek Howard

HTML

<span id="top_scores_menu">
    <a href="javascript:getTopPlayer(0)">Men's</a>
    <a href="javascript:getTopPlayer(1)">Women's 1st</a>
    <a href="javascript:getTopPlayer(2)">Women's 2nd</a>
</span>

<div id="0" class="topPlayer">
    <p>Howdy</p>
</div>
<div id="1" class="topPlayer">
    <p>Hi</p>
</div>
<div id="2" class="topPlayer">
    <p>Hello</p>
</div>
<div id="content">
</div>

CSS

.topPlayer {
    display: none;
}

JavaScript

var numberOfLinks = 3;

function getTopPlayer(element) {
    for (i = 0; i < numberOfLinks; i++) {
        if (i == element) {
            document.getElementById(i).style.display = 'inline';
        }
        else {
            document.getElementById(i).style.display = 'none';
        }
    }
}