ASP.NET Looking to dynamically control Jquery multi tab search
<p>I have the following Jquery which has 4 tabs which have 4 different searches</p>

<p>i.e.</p>

<p>1) Product Name Search
2) Supplier Search
etc</p>

<p>This is the Jquery</p>

<pre><code>&lt;script type="text/javascript"&gt;

$(document).ready(function() {

    //Default Action
    $(".tab-content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab-content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab-content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });
});
&lt;/script&gt;
</code></pre>

<p>And here is the tabs</p>

<pre><code>        &lt;ul class="tabs"&gt;
        &lt;li&gt;&lt;a href="#tab1"&gt;By Product Name&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab2"&gt;By Supplier&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab3"&gt;By EAN Code&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab4"&gt;By IPU Code&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="tab1" class="tab-content"&gt;
        &lt;asp:textbox id="searchProductName" runat="server"&gt;&lt;/asp:textBox&gt; &lt;asp:Button ID="btnProductSearch" runat="server" Text="Search Product Name"  CssClass="search" OnClick="ProductSearch_Click"  UseSubmitBehavior="true" CausesValidation="false" /&gt;
    &lt;/div&gt;

    &lt;div id="tab2" class="tab-content"&gt;
        &lt;asp:textbox id="searchSupplierName" runat="server"&gt;&lt;/asp:textBox&gt; &lt;asp:Button ID="btnSupplierSearch" runat="server" Text="Search Supplier Name"  CssClass="search" OnClick="SupplierSearch_Click" /&gt;
    &lt;/div&gt;

    &lt;div id="tab3" class="tab-content"&gt;
       &lt;asp:textbox id="searchEANCode" runat="server"&gt;&lt;/asp:textBox&gt; &lt;asp:Button ID="btnEANSearch" runat="server" Text="Search EAN Code"  CssClass="search" OnClick="EANSearch_Click" /&gt;
    &lt;/div&gt;

    &lt;div id="tab4" class="tab-content"&gt;
       &lt;asp:textbox id="searchIPUCode" runat="server"&gt;&lt;/asp:textBox&gt; &lt;asp:Button ID="btnIPUSearch" runat="server" Text="Search IPU Code"  CssClass="search" OnClick="IPUSearch_Click" /&gt;
    &lt;/div&gt;
</code></pre>

<p>Now the problem is everytime I perform a search i.e. in the second tab Supplier the page refreshes and the tabs gets reset to first tab. </p>

<p>In my onclick method, is there anyway I get set the tabs to display the second one when the page refreshes.</p>

<p>i.e.</p>

<pre><code>    Protected Sub SupplierSearch_Click(ByVal sender As Object, ByVal e As EventArgs)
    ' Filter by Supplier
    If searchSupplierName.Text.Length &gt; 0 Then
        srcProductListPerCustomer.FilterExpression = " (supplier_name like '%" + searchSupplierName.Text.ToString &amp; "%')"
        productListTable.DataBind()
    End If
End Sub
</code></pre>
