JSFiddle - React, Tailwind, and code Playground

by Vinit Divekar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="link-one" data-class ="div-one">Link One</a>
<a href="#" class="link-two" data-class ="div-two">Link Two</a> 
<a href="#" class="link-three" data-class ="div-three">Link Three</a> 
<a href="#" class="link-four" data-class ="div-four">Link Four</a> 
<a href="#" class="link-five" data-class ="div-five">Link Five</a>

<div class="div-one">
Div #1
</div>

<div class="div-two hidden">
Div #2
</div>

<div class="div-three hidden">
Div #3
</div>

<div class="div-four hidden">
Div #4
</div>

<div class="div-five hidden">
Div #5
</div>

CSS

a {
  display:inline-block;
  margin-right:10px;
  padding:5px 0;
}

.hidden {
  display:none;
}

JavaScript

$("[class^=link-]").click(function(){
        $("[class^=div-]").addClass('hidden');
        $('.' + $(this).attr('data-class')).removeClass('hidden');
});