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个标签。

即。我希望能够指定第1，第2，第3或第4个标签

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

ASP.NET Jquery动态设置选项卡

4 个答案: