JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="tab_container">

  <div data-menu="Page 1">
    Page 1  <br /> 
	<a data-page="2" href="#">Go to page 2</a> <br /> 
	<a data-page="3" href="#">Go to page 3</a>
    <a href="#">Just a normal link</a>
  </div>
  
  <div data-menu="Page 2">
    Page 2  <br /> 
	<a data-page="4" href="#">Go to page 4</a>
  </div>
  
  <div data-menu="Page 3">
    Page 3  <br /> 
	<a data-page="1" href="#">Go to page 1</a>
  </div>
  
  <div data-menu="Page 4">
    <a data-page="1" href="#">Go to page 1</a>
  </div>
  
</div>

CSS

#tab_menu {
  list-style: none;
  margin: 0px;
  padding: 0px;
  float: left;
}

#tab_menu li,
#tab_menu li a,
#tab_container,
#tab_container > div {
  float: left;
}

/* Style customization */
.tab_current a {
	background: red;
}

#tab_menu a {
  text-decoration: none;
  padding: 5px;
  background: #888;
  color: #fff;
  margin: 0px 3px 0px 0px;
}

#tab_container > div {
  width: 400px;
  border: solid #555;
  padding: 5px;
  clear: both;
}

#tab_container > div a { color: #666; }

JavaScript

var cont = $('#tab_container'),
	contDiv = cont.children();

// Hide all, except the first div.
contDiv.not(':first').hide();

// The making of: MENU
$('<ul id="tab_menu" />').prependTo( cont );

var menu = $('#tab_menu'); 

contDiv.each(function() {
  $('<li><a href="#">'+ $(this).data().menu +'</a></li>').appendTo( menu );
});

var menuLi = menu.find('li');

menuLi.first().addClass('tab_current');

// When link with 'data-page' is clicked, use the 
// data number to decide which tab content to open.
contDiv.find('a[data-page]').on('click', function( e ) {
  e.preventDefault();
  var pageD = $(this).data().page - 1;
  contDiv.eq( pageD ).show().siblings().filter(':not(#tab_menu)').hide();
  menuLi.eq( pageD ).addClass('tab_current');
});

menu.children().on('click', function( e ) {
  e.preventDefault();
  var menuLink = $(this);
  menuLink.parent().addClass('tab_current');
  contDiv.eq( menuLink.index() ).show().siblings().filter(':not(#tab_menu)').hide();
});