JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<div class="tabBox">
                <ul class="tabs">
                    <li><a href="#link1" title="Link 1" class="sprite"><span class="sprite">Link 1</span></a></li>
                    <li><a href="#link2" title="Link 2" class="sprite"><span class="sprite">Link 2</span></a></li>
                    <li><a href="#link3" title="Link 3" class="sprite"><span class="sprite">Link 3</span></a></li>
                </ul>
                <div class="tabContent" id="link1">
                    <h4>bla bla 1</h4><!--<img src="http://4gifs.com/gallery/d/124178-1/Guinea_pigs_nomrace.gif" alt="Schweinchen" width="324" height="244"/>-->
                </div>
                <div class="tabContent" id="link2">
                    <h4>bla bla 2</h4><img src="http://farm4.static.flickr.com/3272/2682867554_aa3dbfc5b8.jpg?v=0" alt="Hörnchen" width="500" height="333"/>
                </div>
                <div class="tabContent" id="link3">
                    <h4>bla bla 3</h4><img src="http://img515.imageshack.us/img515/5271/19368.jpg" alt="Timon und Pumba" width="500" height="357"/>
                </div>
            </div>

JavaScript

$.fn.tabtastic = function( options ) {

        var defaults = { };
      
        return this.each(function() {
            //Elemente in Box suchen, Inhalte verstecken, erstes Tab aktivieren
            var o = $.extend(defaults, options),
                $this = $(this),
                tabs = $this.find('ul.tabs'),
                tl = tabs.find('a'),
                tc = $this.find('div.tabContent');
               
                //erstes tab aktivieren, andere verstecken               
                tl.first().addClass('active');
                tc.not(':first').hide();
                
            //Eventhandler an Links anhängen
            tabs.delegate('a', 'click', function(e) {
                var $this = $(this),
                    tabLink = '#' + $this.attr('href').split('#')[1];
                
                //Ist Tab schon aktiv, dann hier abbrechen
                if( $this.hasClass('active') ){
                    return false;
                }
                  
                //Aktivklassen entfernen
                tl.removeClass('active');
                //Geklicktes Tab bekommt Aktivklasse
                $this.addClass('active'); 
                
                //Content wird gezeigt
                tc.slideUp().filter( tabLink ).slideDown();
                e.preventDefault();
            });
          
        });

    };
$('div.tabBox').tabtastic();