JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
  <ul>
    <li><a href="#" class="navselection" data-type="1">1</a></li>
    <li><a href="#" class="navselection" data-type="2">2</a></li>
    <li><a href="#" class="navselection" data-type="3">3</a></li>
    <li><a href="#" class="navselection" data-type="4">4</a></li>
    <li><a href="#" class="navselection" data-type="5">5</a></li>
  </ul>
</div>

<div id="main">
  <div id="main1" data-type="1">Main 1</div>
  <div id="main2" data-type="2">Main 2</div>
  <div id="main3" data-type="3">Main 3</div>
  <div id="main4" data-type="4">Main 4</div>
  <div id="main5" data-type="5">Main 5</div>
</div>

JavaScript

$("#main div").hide()

$("#nav ul li").click(function() {
    $("#main div").hide(); //hide others if open
    var type = $("a", this).data("type");
    $("#main div[data-type='" + type + "']").show();
});