JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<div id="tabmenu">
  <ul id="nav">
    <li><a href="#" class="active">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Tab 4</a></li>
  </ul>
  <div id="tab-content">
    <div id="tab1">
      <p>This is a very simple jQuery tabbed navigation.</p>
    </div>
    <div id="tab2">
      <p>This can contain anything.</p>
    </div>

    <div id="tab3">
      <p>Like photos:</p>
      <br />
      <img src="http://www.catname.org/images/cat04.jpg" alt="" />
    </div>

    <div id="tab4">
      <p>Or videos:</p>
      <br />
      <iframe width="250" height="180" src="http://www.youtube.com/embed/TZ860P4iTaM" frameborder="0" allowfullscreen></iframe>
    </div>

  </div>

</div>

CSS

#tabmenu {
  margin: 20px 0 0 20px;
}

li,
p {
  font: 12px/16px Arial, Helvetica, sans-serif;
}

#nav {
  overflow: hidden;
  padding-left: 0;
}

#nav li {
  float: left;
  list-style: none;
  background: #EEE;
}

#nav li a {
  padding: 10px;
  border-top: 1px solid #CCC;
  border-right: 1px solid #CCC;
  display: block;
  background: #CCC;
}

#nav li:first-child a {
  border-left: 1px solid #CCC;
}

#tab-content {
  border: 1px solid #CCC;
  padding: 10px;
  width: 300px;
  margin-top: -1px;
  -moz-border-radius: 0 0 5px 5px;
}

#nav li a.active {
  background: #FFF;
  margin-bottom: -3px;
}

JavaScript

$('#tab-content div').hide();
$('#tab-content div:first').show();
$('#nav li').click(function() {
  $('#nav li a').removeClass("active");
  $(this).find('a').addClass("active");
  $('#tab-content div').hide();

  //gets the current index of (this) which is #nav li
  var indexer = $(this).index();
  //uses whatever index the link has to open the corresponding box 
  $('#tab-content div:eq(' + indexer + ')').fadeIn();

});