JSFiddle - React, Tailwind, and code Playground

by staeff

HTML

<!DOCTYPE html>
<html>
  
  <head>
    <title>Menu Navigator</title>
  </head>
  
  <body>
    <div class="tabbed-menu">
      <ul class="tabs">
        <li rel="intro" class="selected">Intro</li>
        <li rel="main">Main</li>
        <li rel="outro">Outro</li>
      </ul>
      <div class="content">
        <div class="page" id="intro" style="display: block;">
          <p>You think water moves fast? You should see ice. It moves like it has a
            mind. Like it knows it killed the world once and got a taste for murder.
            After the avalanche, it took us a week to climb out. Now, I don't know
            exactly when we turned on each other, but I know that seven of us survived
            the slide... and only five made it out. Now we took an oath, that I'm breaking
            now. We said we'd say it was the snow that killed the other two, but it
            wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
        </div>
        <div class="page" id="main" style="display: none;">
          <p>The path of the righteous man is beset on all sides by the iniquities
            of the selfish and the tyranny of evil men. Blessed is he who, in the name
            of charity and good will, shepherds the weak through the valley of darkness,
            for he is truly his brother's keeper and the finder of lost children. And
            I will strike down upon thee with great vengeance and furious anger those
            who would attempt to poison and destroy My brothers. And you will know
            My name is the Lord when I lay My vengeance upon thee.</p>
        </div>
        <div class="page" id="outro" style="display: none;">
          <p>Well, the way they make shows is, they make one show. That show's called
            a pilot. Then they show that show to the people who make shows, and on
            the strength of that one show they decide if they're going to make more
            shows. Some pilots get picked and...

CSS

/*  This div class is the container for our menu.
    It defines attributes for everything inside. */
 div.tabbed-menu {
  font-family:"Helvetica";
  font-size: 15px;
  width: 600px;
}
/*  This ul class defines how your menu options
    will be arranged and also gives us a nice 
    dividing line between the menu and the content. */
 ul.tabs {
  text-align: center;
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 26px;
  color: #0088CC;
  border-bottom: 1px solid #DDDDDD;
}
/*  This defines the look of the individual tabs of 
    your menu when they are contained in a tabs class ul */
 ul.tabs li {
  margin-bottom: -1px;
  padding: 3px 10px 0 10px;
  border: 1px solid #DDDDDD;
  background: #EFEFEF;
  /*  inline-block tells the browser to arrange the list
        elements in a line rather than each element on its
        own line. */
  display: inline-block;
  /* The attributes here round the top left
        and right corners of the tabs. */
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
/* This defines what a tab should look like when selected */
 ul.tabs li.selected {
  background: #FFF;
  border-bottom-color: transparent;
}
/* This defines how a tab looks when your mouse hovers above it */
 ul.tabs li:hover {
  color: #333333;
  cursor: pointer;
  background: #FFFFFF;
}
/*  This centers all of the text within a page element */
 div.page {
  text-align: center;
}
/*  This overrides the text centering we defined above if
    the text is within a list and also tells your browser
    not to put bullet points next to the text. */
 div.page li {
  text-align: left;
  list-style-type: none;
}

JavaScript

$(document).ready(function () {
  $('.tabs li').click(function () {
    var $this = $(this),
      selectionId = $this.attr('rel'),
      $content = $(".content"),
      $pages = $(".page");
      console.log(selectionId)
    if (!($this.hasClass('selected'))) {
      $('.tabs li').removeClass('selected');
      $(this).addClass('selected');
    }
    $content.fadeOut("slow", function () {
      $pages.css("display", "hidden");
      $("#"+selectionId).css("display", "block");
      $content.fadeIn("slow");
    });
  });
});