Bootstrap Tabs Selected on PostBack in .Net

Aspx page

<div id="Tabs" role="tabpanel">

    <!-- Nav tabs -->

    <ul class="nav nav-tabs" role="tablist">

        <li><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal

        </a></li>

        <li><a href="#employment" aria-controls="employment" role="tab" data-toggle="tab">Employment</a></li>

    </ul>

    <!-- Tab panes -->

    <div class="tab-content" style="padding-top: 20px">

        <div role="tabpanel" class="tab-pane active" id="personal">

            This is Personal Information Tab

        </div>

        <div role="tabpanel" class="tab-pane" id="employment">

            This is Employment Information Tab

        </div>

    </div>

</div>

<asp:HiddenField ID="TabName" runat="server" />

<script type="text/javascript">

$(function () {

    var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";

    $('#Tabs a[href="#' + tabName + '"]').tab('show');

    $("#Tabs a").click(function () {

        $("[id*=TabName]").val($(this).attr("href").replace("#", ""));

    });

});

</script>

Code Behind

protected void Page_Load(object sender, EventArgs e)

{

    if (this.IsPostBack)

    {

        TabName.Value = Request.Form[TabName.UniqueID];

    }

}