tabbers

<!--below is the javascript, put this right above the meta tags-->

<script type="text/javascript" src="http://static.tumblr.com/7gk7xdc/t1Mnqtxfn/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7gk7xdc/6vVnqtxgf/tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul#tabs li").click(function(e){
        if (!$(this).hasClass("active")) {
            var tabNum = $(this).index();
            var nthChild = tabNum+1;
            $("ul#tabs li.active").removeClass("active");
            $(this).addClass("active");
            $("ul#tab li.active").removeClass("active");
            $("ul#tab li:nth-child("+nthChild+")").addClass("active");
        }
    });
});
</script>




/*here's the css ; put it anywhere after <style></style> and before <body>*/

ul#tabs {
    list-style-type: none;
    padding: 0;
    text-align: center;
}
ul#tabs li {
    text-shadow:none;
    font-size:11px;
    display: inline-block;
    padding: 2px;
    margin-bottom: 4px;
    color: #ccc;
    cursor: pointer;
        -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
ul#tabs li:hover {
    color:#fff;
        -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
ul#tabs li.active {
    color: #fff;
}
ul#tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#tab li {
    display: none;
}
ul#tab li.active {
    display: block;
}





<!--- & here's the html ; put it between <body></body>----->

<ul id="tabs">
    <li class="active">tab 1</li>
    <li>tab 2</li>
    <li>tab 3</li>
    <li>tab 4</li>
</ul>

<ul id="tab">

    <li class="active">

tab 1 content here

    </li>

<!-------------------------------------->

    <li>

tab 2 content here

</li>

<!-------------------------------------->

    <li>

tab 3 content here

    </li>

<!-------------------------------------->

    <li>

tab 4 content here

    </li>
</ul>