javascript - asp.net bootstrap Keep current active tab after post-back event

Question

I have the following asp.net aspx code

<asp:LinkButton  CssClass="form-search" ID="LinkButtonSearch"  runat="server">Search</asp:LinkButton>

<br />

<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane" id="profile">profile</div>
<div class="tab-pane" id="messages">messages</div>
<div class="tab-pane" id="settings">settings</div>
</div>

This script code keeps the active tab after post-back event when i click on the LinkButton

<script>
  $(document).ready( function(){
    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    });

    // store the currently selected tab in the hash value
    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });

    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    $('#myTab a[href="' + hash + '"]').tab('show');
  });
</script>

NB: This code works fine only when i reload the current page. It keeps the current tab focus. but when u click on the Link Button, it takes me back to the default tab.

How can make this code also work on the post back event of any controls.

Note: i took this example from the stack post : How do I keep the current tab active with twitter bootstrap after a page reload? . This solution has been posted by: @koppor.

Any helps

Answer 1

Not familiar with jQuery so i sought an asp.net solution when i had this problem. I solved this problem by altering the a href in the Lists and replaced with asp:linkbutton. Then i also went to the divs containing the tabs and added runat = "server" to each one, also added ID="Tab1" , Tab2 and so on. Then on the code behind for the linkbuttons i added the following code

Me.Tab1.Attributes("class") = "tab-pane active"
Me.Tab2.Attributes("class") = "tab-pane"
Me.Tab3.Attributes("class") = "tab-pane"

For the tab you want to be active you change the attribute to tab-pane active. This way when the linkbutton is clicked only the tab you want to be active is active and on postback because these controls are now server side you will remain on the active tab.