jQuery:Tab Hide show

<ul class="tab-cat-name">
    <li>
        <a class="" href="javascript:void(0)" onclick="ShowHideTab('1')">Tab1</a>
        <a href="javascript:void(0)" onclick="ShowHideTab('2')" class="active">Tab2</a>
    </li>
</ul>
<div id="show_hide_1" class="tab-listing" style="display: none;">           
Content1
</div>
<div style="" id="show_hide_2" class="tab-listing">
Content2
</div>
       
<script type="text/javascript">
function ShowHideTab(current){
    jQuery( ".tab-listing" ).each(function( index ) {
        var toshow= index+1;
            if(current==toshow){
            jQuery('#show_hide_'+toshow).fadeIn(1000);
            }else{
            jQuery('#show_hide_'+toshow).fadeOut(1000);
            }
 });
}  
</script>