TABS

Bug Status: Working Perfectly If anyone wants to I was thinking that there should be an easy way of setting the default tab. I may work on that later, have fun

HTML

<span style="margin-left: 80px;"><a href="http://jamesrossini.com/" target="_blank">The James Kyle</a></span><span style="float:right; margin-right: 80px;"><a href="https://twitter.com/thejameskyle" target="_blank">Twitter</a> | <a href="https://plus.google.com/114219281805415139374/" target="_blank">Google +</a> </span>



<div class="tabs four">
    <ul class="nav">
        <li><a href="#item1">1</a></li>
        <li><a href="#item2">2</a></li>
        <li><a href="#item3">3</a></li>
        <li><a href="#item4">Hipster Ipsum</a></li>
    </ul>
    
    <div class="container">
        <ul class="set">
            <li id="item1">
                Dreamcatcher biodiesel art party vinyl. Echo park fap quinoa biodiesel yr craft beer. Viral gentrify PBR retro food truck carles quinoa, lo-fi blog letterpress cliche synth. Lo-fi craft beer DIY, tumblr iphone viral mixtape lomo before they sold out shoreditch stumptown. Gluten-free letterpress 8-bit, you probably haven't heard of them sartorial aesthetic quinoa freegan trust fund bicycle rights pitchfork. Retro terry richardson chambray butcher iphone irony. Stumptown beard locavore iphone, quinoa biodiesel farm-to-table freegan irony aesthetic thundercats mcsweeney's letterpress.</li>
            <li id="item2">
                Farm-to-table carles fixie, twee art party +1 cosby sweater wolf. Sartorial retro pitchfork, keytar tumblr 3 wolf moon fap iphone sustainable. Cosby sweater aesthetic banh mi, quinoa vice gentrify viral locavore cardigan irony. Keffiyeh dreamcatcher banksy chambray mixtape, next level vegan seitan put a bird on it synth thundercats shoreditch pitchfork yr +1. PBR lomo gentrify, brunch butcher chambray stumptown biodiesel photo booth tumblr cred before they sold out leggings williamsburg vinyl. Four loko fap tofu, mlkshk fixie stumptown vice thundercats keffiyeh gluten-free mixtape twee dreamcatcher put a bird on it farm-to-table. Twee high life gluten-free, marfa american apparel lo-fi fixie...

CSS

body {
    font-family: 'Helvetica Neue', Helvetica, Arial;
    color: #333;
    font-size: 75%;
    background: #f5f5f5;
}
a {
    color: #333;
    text-decoration: none;
}
a:hover {
    color: #36C;
    text-decoration: underline;
}
.tabs {
    background: #FFF;
    width: 90%;
    margin: 40px auto;
    box-shadow: rgba(0,0,0,0.25) 0px 2px 3px;
    
}
.tabs .nav {
    width: 100%;
    position: relative;
    height: 40px;
    margin: 0px;
    padding: 0px;
    border: transparent 0px solid;
    border-bottom: #DDD 1px solid;
    list-style-type: none;
}
.tabs .nav li {
    margin: 0px;
    padding: 0px;
    float: left;
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    -webkit-transition: all 0.09s linear;
}

.nav li a { display: block; }
.tabs.one .nav li {width: 100%;}
.tabs.two .nav li {width: 50%;}
.tabs.three .nav li {width: 33%;}
.tabs.three .nav li.last {width: 34%;float:right;}
.tabs.four .nav li {width: 25%;}
.tabs.five .nav li {width: 20%;}
.tabs.six .nav li {width: 16.5%;}
.tabs.six .nav li.last {width: 17.5%;float:right;}
.tabs .nav li:hover {background:#EEE;}
.tabs .nav li:active {background: #BBB;}
.tabs .nav li.selected {background: #DDD;}

.tabs .container {
    width: 100%;
    overflow: visible;
    overflow-x: hidden;
}
.tabs .container .set {margin:0px; padding:0px;}
.tabs.one .container .set {width: 100%;}
.tabs.two .container .set {width: 200%;}
.tabs.three .container .set {width: 300%;}
.tabs.four .container .set {width: 400%;}
.tabs.five .container .set {width: 500%;}
.tabs.js-on .container .set {width: 100%;}
.tabs .container .set li {
    float: left;
    display: block;
    padding: 20px;
}
.note {
    width: 100%;
    margin: 0px auto;
    color: #999;
    text-align: center;
    margin-bottom: 60px;
}

JavaScript

$('#off').hide();
$('#on').show();

$(function() {
   var $tabSys = $('div.tabs').addClass('js-on');
   $tabSys.each(function() {
        var $tabs = $(this).find('ul.nav li'),
            $panes = $(this).find('ul.set li');
       $panes.hide().eq(0).show();
       $tabs.filter(':last').addClass('last');
        $tabs.find('a').click(function() {
            $panes.hide().filter(this.hash).show();
            $tabs.removeClass('selected');
            $(this).parent().addClass('selected');
           return false;
        }).eq(0).click();
    });
});