Question

Hey I have my code as follows at the moment

<script type="text/javascript">
var activeTabId = <%=ActiveTabId %>;
$(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;
});
});
</script>

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

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

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

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

And then in code behind i.e.

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

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.

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

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

But it doesnt seem tor recognise anything but first and last ?

Answer 1

Try eq(index) – this is a zero-based index selector.

That is to say, something like this:

$("ul.tabs li:eq(1)")

$("ul.tabs li:eq(2)")