JSFiddle - React, Tailwind, and code Playground

by cillay

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css">
<div id="some_tabs" class="tabs ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
      <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#waldorf-salad">Waldorf Salad</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#celery">Celery</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#apples">Apples</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#walnuts">Walnuts</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#grapes">Grapes</a></li>
  </ul>
  <div id="waldorf-salad" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS_eZZjArXnGvvQWigMfoevYXUpF8hZOTZLMmNDKkm6sfY_KvNt">
    <h1>Waldorf Salad</h1>
    <p>Click a tab above to discover the ingredients for a Waldorf salad.</p>
  </div>
  <div id="celery" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
    <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQlcIYFdprLO72dYToanRNTBaXBP1kayLuG5AzgrQi8F8JMq57D7g">
    <h1>Celery</h1>
    <p>Contrary to popular belief, celery does not contain negative calories: digestion of celery does not burn more calories than a person obtains from it.</p>
  </div>
  <div id="apples" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
    <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcQ6duMCzEcWF7U2mo0tuxtyvv8eONx2u46hZ4cWvmSF29BDySkk">
    <h1>Apples</h1>
    <p>The proverb "An apple a day keeps the doctor away.", addressing the health effects of the fruit, dates from 19th century Wales.</p>
  </div>
  <div id="walnuts" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
    <img...

JavaScript

$.getScript('https://raw.github.com/cowboy/jquery-bbq/v1.2.1/jquery.ba-bbq.min.js', function(){
  var tabs = $('.tabs'), tab_a_selector = 'ul.ui-tabs-nav a';
  tabs.tabs({ event: 'change' });
  tabs.find( tab_a_selector ).click(function(){
    var state = {}, id = $(this).closest( '.tabs' ).attr( 'id' ), idx = $(this).parent().prevAll().length;
    state[ id ] = idx;
    $.bbq.pushState( state );
  });
  $(window).bind( 'hashchange', function(e) {
    tabs.each(function(){
      var idx = $.bbq.getState( this.id, true ) || 0;
      $(this).find( tab_a_selector ).eq( idx ).triggerHandler( 'change' );
    });
  });
  $(window).trigger( 'hashchange' );
});