JSFiddle - React, Tailwind, and code Playground

by Stepan Suvorov

HTML

<div class="tabs">
<ul class="navigation">
<li><a href="#" data-container="#container1">Tab1</a></li>
<li><a href="#" data-container="#container2">Tab2</a></li>
</ul>
</div>
<div class="containers">
   <div id="container1" class="container">content1</div>
   <div id="container2" class="container">content2</div>
</div>

CSS

.navigation{


}

.navigation li {
    float: left;
    margin: 0 0.5em 0 0;
}

.containers{
    border: 1px solid;
    clear: both;
 }

JavaScript

$(function(){

$('.container', '.containers').hide();
var pointer = $('.container:first', '.containers');
$(pointer).show();

$('.navigation').on('click', 'a', function(){
    debugger
   $(pointer).hide();
   pointer = $(this).data('container');
   $(pointer).show();
});

});