evermind: vertical tabs using jquery & css3

this is an example on howto create a vertical tab using jquery and css3

by mtambulut

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<script src="&quot;http://benalman.com/code/projects/jquery-hashchange/jquery.ba-hashchange.js"></script>
<div id="tabs">
    <div id="menu">
       <ul>
           <li><a href="#1">Datos 1</a></li>
           <li><a href="#2">2</a></li>
           <li><a href="#3">3</a></li>
       </ul>
     </div>
     <div id="contents">
          <div id="1" class="tabcontent">1</div>
          <div id="2" class="tabcontent">2</div>
          <div id="3" class="tabcontent">3</div>
     </div>
     </div>

CSS

#tabs div
        {
            width: 200px;
            padding: 25px 0;
            margin: 0;
            position: relative;
        }

        #contents div
        {
            display: none;
            position: absolute;
            left: 200px;
            top: 0;
            width: 200%;
            margin-left: 20px;
        }

        #contents div:target
        {
            display: block;
        }

JavaScript

$(function() {
    var items = $('#v-nav>ul>li').each(function() {
        $(this).click(function() {
            //remove previous class and add it to clicked tab
            items.removeClass('current');
            $(this).addClass('current');

            //hide all content divs and show current one
            $('#v-nav>div.tab-content').hide().eq(items.index($(this))).show('fast');

            window.location.hash = $(this).attr('tab');
        });
    });

    if (location.hash) {
        showTab(location.hash);
    }
    else {
        showTab("tab1");
    }

    function showTab(tab) {
        $("#v-nav ul li:[tab*=" + tab + "]").click();
    }

    // Bind the event hashchange, using jquery-hashchange-plugin
    $(window).hashchange(function() {
        showTab(location.hash.replace("#", ""));
    })

    // Trigger the event hashchange on page load, using jquery-hashchange-plugin
    $(window).hashchange();
});