Tabbing jQuery Example

--------------------------------------------
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>



<div class="tabbing">
    <ul class="tab">
        <li><a href="javascript:void(0);">Tab 1</a></li>
        <li><a href="javascript:void(0);">Tab 2</a></li>
        <li><a href="javascript:void(0);">Tab 3</a></li>
    </ul>
        <div class="open1">
            hi
        </div>
        <div class="open1">
            satish
        </div>
        <div class="open1">
            mallick
        </div>
</div>

<style>
  .tabbing{margin:0 auto; width:500px;}
.tabbing ul.tab{}
.tabbing ul.tab li{display:inline-block; vertical-align:top; padding:0 5px; float:left;}
.tabbing ul.tab li a{background:#FF0000;color: #FFFFFF;padding: 10px;display: inline-block; vertical-align:top;}
.tabbing ul.tab li a.active, .tabbing ul.tab li a:hover{background:#d5d5d5; color:#000; border-bottom:1px solid #fff; }
.tabbing .open1{margin: 0 0 0 5px;padding: 14px;width: 93.4%;background:#d5d5d5; color:#000; clear:both;}
</style>

<script>
             $(window).load(function(){
    $('.tabbing').children('.open1').hide();
    $('.tabbing').children('.open1').eq(0).show();
    $('ul.tab li').children('a').eq(0).addClass('active');
});
    $(document).ready(function(){
        $('ul.tab li').click(function(){
            $('ul.tab li').children('a').removeClass('active');
            $('.tabbing').children('.open1').hide();
            $(this).children('a').addClass('active');
            $('.tabbing').children('.open1').eq($(this).index()).show();
        });
    });
</script>


--------------------------------------------