JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<nav>
  <ul>
    <li><a data-section="home">Home</a></li>
    <li><a data-section="about">About</a></li>
    <li><a data-section="services">Services</a></li>
  </ul>
</nav>

<div id="home" class="hideable-section">Home Content</div>
<div id="about" class="hideable-section">About Content</div>
<div id="services" class="hideable-section">Services Content</div>

CSS

ul {
  padding: 0;
}
li {
  list-style-type: none;
  display: inline-block;
  margin-right: 8px;
}
a {
  cursor: pointer;
  color: #7ca6e0;
}
a:hover {
  text-decoration: underline;
}
.hideable-section {
  display: none;
}
.hideable-section:first-of-type {
  display: block;
}

JavaScript

$(function() {
  $('nav a').click(function() {
    // Get the section to show
    var $section = $('#' + $(this).data('section'));

    // If its already visible, do nothing.
    // Otherwise, hide the others and then fade in the desired section.
    if (!$section.is(':visible')) {
      $('.hideable-section').hide();
      $section.fadeIn();
    }
  });
});