jQuery Tabs

index.html

<!-- http://jsfiddle.net/evMdx/ -->
<div class="tabs">
    <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
    </ul>

    <div class="tabsCont">
        <div class="tab">first</div>
        <div class="tab">Second</div>
    </div>
</div>

style.css

.tabs > ul li {
	cursor: pointer;
	display: inline-block;
	list-style: none;
	margin: 0;
	text-align: center;
}
.tabs > ul li.active {background: #eee;}
.tabsCont .tab {display: none;}
.tabsCont .tab.active {display: block;}

tabs.jquery.js

$(document).ready(function() {
    $('.tabs').each(function() {
        var $tabs = $(this),
            $toggles = $tabs.children('ul').find('li'),
            $tab = $tabs.find('.tab');

        $toggles.eq(0).addClass('active');
        $tab.eq(0).addClass('active');

        $toggles.on('click', function() {
            var $this = $(this),
                index = $this.index();

            if(!$this.hasClass('active')) {
                $toggles.removeClass('active');
                $this.addClass('active');

                $tab.hide();
                $tab.eq(index).fadeIn(200);
            }

        });
    });
});