plugin: Tabs Swichter

custom

markup
------
<ul class='tabs'>
<li><a href='#tab1'>first</a> <span class="dashArr"></span> </li>
<li><a href='#tab2'>second</a></li>
<li><a href='#tab3'>third</a></li>
<li><a href='#tab4'>fourth</a></li>
<li><a href='#tab5'>fifth</a></li>
<li><a href='#tab6'>sixth</a></li>
</ul>

<div id='tab1'>first content</div>
<div id='tab2'>second content</div>
<div id='tab3'>third content</div>
<div id='tab4'>fourth content</div>
<div id='tab5'>fifthcontent</div>
<div id='tab6'>sixth content</div>​



css
---
body { padding: 20px; }
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
padding: 0;
width: 770px;
float: right;
position: relative;
right: -8px;
}
#tab1 ul, #tab2 ul, #tab3 ul, #tab4 ul, #tab5 ul, #tab6 ul, #tab7 ul {
list-style: none;
margin: 0; padding: 0; 
}

#tab1 ul li a, #tab2 ul li a, #tab3 ul li a, #tab4 ul li a, #tab5 ul li a, #tab6 ul li a, #tab7 ul li a {
text-decoration: none; 
color: rgba(95,178,218,1);
font: 18px/20px Myriad Pro, Arial, Helvetica, Tahoma, sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
}
#sections small { font-size: 13px; font-weight: bold; padding: 0 2px; }
.tabs li {
    list-style:none;
    display:block;
}
.tabs  { float: left; }
.tabs a {
    padding: 10px 20px;
    display:inline-block;
    background: #eee;
    color:#999;
    text-decoration:none;
    width: 204px;
    font: 16px/20px Myriad Pro, Arial, Helvetica, Tahoma, sans-serif;
    text-transform: uppercase;
    margin: 0 0 1px 0;
        -webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
    
}
.dashArr { width: 7px; height: 13px; background: white; display: inline-block; float: right; }
.tabs a.active {
    background: #333;
    color:#fff;
}​

jQuery
------
    $('ul.tabs').each(function() {
        var $active, $content, $links = $(this).find('a');

        $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
        $active.addClass('active');
        $content = $($active.attr('href'));

        $links.not($active).each(function() {
            $($(this).attr('href')).hide();
        });

        $(this).on('click', 'a', function(e) {
            $active.removeClass('active');
            $content.hide();

            $active = $(this);
            $content = $($(this).attr('href'));

            $active.addClass('active');
            $content.show();

            e.preventDefault();
        });
    });​