JSFiddle - React, Tailwind, and code Playground

by Binyamin

HTML

<button>Loop</button> <span id="loopStatus">true</span><br />
<ul id="list">
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/one.html" title="one">1</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/two.html" title="two">2</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/three.html" title="three">3</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/four.html" title="four">4</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/five.html" title="five">5</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/six.html" title="six">6</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/seven.html" title="seven">7</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/eight.html" title="eight">8</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/nine.html" title="nine">9</a></li>
</ul>
<div id="content" style="clear:both;">Loading...</div>

CSS

ul{
    width:150px;
}
li {
    display:block;
    float:left;
    list-style:none;
    width:40px;
    height:40px;
    background-color:#c0c0c0;
    border:transparent 1px solid;
    margin:3px;
    text-align:center;
}
li a{
    display:block;
    padding:10px;
    text-decoration:none;
    color:#fff;
}
li.current,a:hover{
    background-color:#ff8040;
}
a.current{
    color:#000;
}

JavaScript

/**
 * @license 
 * jQuery Tools 1.2.5 Tabs- The basics of UI design.
 * 
 * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
 * 
 * http://flowplayer.org/tools/tabs/
 *
 * Since: November 2008
 * Date:    Wed Sep 22 06:02:10 2010 +0000 
 */
(function($) {
    // static constructs
    $.tools = $.tools || {
        version: '1.2.5'
    };
    $.tools.tabs = {
        conf: {
            tabs: 'a',
            current: 'current',
            onBeforeClick: null,
            onClick: null,
            effect: 'default',
            //initialIndex: 0,    //it cases 2 ajax GET requests instead of 1 request        
            event: 'click',
            rotate: false,
            // 1.2
            history: false
        },
        addEffect: function(name, fn) {
            effects[name] = fn;
        }
    };
    var effects = {
        // simple "toggle" effect
        'default': function(i, done) {
            this.getPanes().hide().eq(i).show();
            done.call();
        },
        /*
            configuration:
                - fadeOutSpeed (positive value does "crossfading")
                - fadeInSpeed
        */
        fade: function(i, done) {
            var conf = this.getConf(),
                speed = conf.fadeOutSpeed,
                panes = this.getPanes();
            if (speed) {
                panes.fadeOut(speed);
            } else {
                panes.hide();
            }
            panes.eq(i).fadeIn(conf.fadeInSpeed, done);
        },
        // for basic accordions
        slide: function(i, done) {
            this.getPanes().slideUp(200);
            this.getPanes().eq(i).slideDown(400, done);
        },
        /**
         * AJAX effect
         */
        ajax: function(i, done) {
            this.getPanes().eq(0).load(this.getTabs().eq(i).attr("href"), done);
        }
    };
    var w;
    /**
     * Horizontal accordion
     * 
     * @deprecated will be replaced with a more robust implementation
     */
   ...