Tabs using jquery

<div style="clear: both; padding-top: 5px; padding-left: 5px;">
                    <div>
                        <ul class="tabs">
                            <li id="t1"><a id="a1" href="#tab1" mce_href="#tab1" tabindex="-1" onclick="SaveTabStatus('1');">Sales
                                Order Header</a></li>
                            <li id="t2"><a id="a2" href="#tab2" mce_href="#tab2" tabindex="-1" onclick="SaveTabStatus('2');">Order
                                Details</a></li>
                        </ul>
                    </div>
                </div>

<div style="width: 1010px; padding-left: 5px; padding-top: 5px">
                    <div class="tab_container" style="height: 640px; background-color: #c7c8ca;">
                        <div id="tab1" class="tab_content"> tab 1 content</div>
<div id="tab2" class="tab_content"> tab 2 content</div>
</div>
</div>

JQUERY

jQuery(document).ready(function() {
            CommonforAllTabs();
            //defaultoperations();
        });
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function() {
            CommonforAllTabs();
            //defaultoperations();
        });
        function CommonforAllTabs() {

            var tabvalue = document.getElementById('<%=hdTabValue.ClientID%>').value;


            if (tabvalue == '1') {
                jQuery("#t1").addClass("active");
                jQuery("#t2").removeClass("active");
                jQuery("#tab1").attr("style", "display:block");
                jQuery("#tab2").attr("style", "display:none");
            }
            else if (tabvalue == '2') {
                jQuery("#t1").removeClass("active");
                jQuery("#t2").addClass("active");
                jQuery("#tab1").attr("style", "display:none");
                jQuery("#tab2").attr("style", "display:block");
            }

            else if (tabvalue == '') {
                jQuery(".tab_content").hide();
                jQuery("ul.tabs li:first").addClass("active").show();
                jQuery(".tab_content:first").show();
            }
            jQuery("ul.tabs li").click(function() {
                jQuery("ul.tabs li").removeClass("active");
                jQuery(this).addClass("active");
                jQuery(".tab_content").hide();
                var tabid = this.id;
                if (tabid == "t1")
                    jQuery("#tab1").attr("style", "display:block");
                else if (tabid == "t2")
                    jQuery("#tab2").attr("style", "display:block");

                var actve = jQuery(this).find("a").attr("href");
                jQuery(actve).fadeIn();
                return false;
            });

        }
(or)
CommonforAllTabs(); use this above method or this below method both are give same result dont use this two methods
 new changes in commonforAlltabs function both are working. above one is normal this one is dynamic

 

 

function CommonforAllTabs() {
jQuery("ul.vtabs li").removeClass("active");
jQuery(".vtab_content").hide();
var x = $('#<%=HdTabValue.ClientID%>').val(); 
jQuery("#t"+x).addClass("active");
jQuery("#dvTab"+x).attr("style", "display:block");
jQuery("ul.vtabs li").click(function() {
jQuery("ul.vtabs li").removeClass("active");
jQuery(this).addClass("active");
jQuery(".vtab_content").hide();
jQuery("#" + this.id).attr("style", "display:block");
var actve = jQuery(this).find("a").attr("href");
jQuery(actve).fadeIn();
return false;
}); 
}