ASP.NET jQuery的選項卡集動態

Question

嘿，我有我的代碼，目前

<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> 

在後面的代碼即

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

我的問題是如下然後我似乎在此刻唯一能夠定義「第一個」「最後」選項卡，但不知道如何動態設置中間的兩個選項卡，即超出我的4個選項卡。

I.e.我想可以指定第一，第二，第三或第四個標籤

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 

但它似乎不承認托爾什麼，但第一個和最後一個？

Answer 1

嘗試eq(index) - 這是一個從零開始的索引選擇器。

也就是說，這樣的事情：

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

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

Answer 2

你似乎是要對這個錯誤的方式;如果要動態地選擇一個選項卡，你只需調用適當的方法：

$('#myTabControl').tabs('select', 1); 

您選擇動態基於0的標籤這種方式，然後將所有相應的事件被解僱。

Answer 3

使用eq獲取所需的選項卡。您甚至不需要開關塊

$(".tab-content").hide(); //Hide all content 
$("ul.tabs li").eq(activeTabId-1).addClass("active").show(); //Activate tab 
$(".tab-content").eq(activeTabId-1).show(); //Show tab content 

Answer 4

您是否使用$('#tabs').tabs()來設置標籤？

如果是的話，你應該在頁面加載使用時，可以設置選項卡的選擇指標：

$(document).ready(function() { 
    $('#tabs').tabs({ 
     selected: activeTabId 
    }); 
}); 

或之後選擇所選擇的選項卡：

$('#tabs').tabs('select', activeTabId);