ASP.NET Jquery set tabs dynamically
<p>Hey I have my code as follows at the moment</p>

<pre><code>&lt;script type="text/javascript"&gt;
var activeTabId = &lt;%=ActiveTabId %&gt;;
$(document).ready(function() {

switch (activeTabId) {
    case 1:
        //for tab 1
        $(".tab-content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab-content:first").show(); //Show first tab content
        break
    case 2:
        //for tab n
        $(".tab-content").hide(); //Hide all content
        $("ul.tabs li:2").addClass("active").show(); //Activate first tab
        $(".tab-content:2").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;

&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>And then in code behind i.e.</p>

<pre><code>    Protected Sub SupplierSearch_Click(ByVal sender As Object, ByVal e As EventArgs)
    Me._activeTabId = 2
    ' Filter by Supplier
    filterList()
End Sub
</code></pre>

<p>My problem is I seem to at the moment only be able define "first" "last" tab, but no idea how I can set dynamically the middle two tabs i.e. out of my 4 tabs.</p>

<p>I.e. I would like to be able specify 1st,2nd,3rd or fourth tab</p>

<pre><code>switch (activeTabId) {
    case 1:
        //for tab 1
        $(".tab-content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab-content:first").show(); //Show first tab content
        break
</code></pre>

<p>But it doesnt seem tor recognise anything but first and last ?</p>
