JSFiddle - React, Tailwind, and code Playground

by neuroflux

HTML

<a href="#" name="div1">div one</a>
<a href="#" name="div2">div two</a>
<a href="#" name="div3">div three</a>

<div id="div1" class="box">Some content 1</div>
<div id="div2" class="box hideme">Some content 2</div>
<div id="div3" class="box hideme">Some content 3</div>

CSS

.hideme { display: none; }
#div1 {
    width: 300px;
    height: 300px;
    background-color: lightgreen;
}
#div2 {
    width: 300px;
    height: 300px;
    background-color: lightblue;
}
#div3 {
    width: 300px;
    height: 300px;
    background-color: yellow;
}

JavaScript

$('a').on('click', function() {
    var thisDiv = $(this).attr('name');
    $('.box').css('display','none');
    $('#' + thisDiv).css('display','block');
});