jQuery选项卡 - 添加新选项卡后不显示内容

Question

我有一个简单的asp.net网页，直到我添加了第四个jQuery选项卡才能正常工作。无论我在第4个标签上放置什么内容，都不会呈现任何内容。

在搜索了大约12个SO帖子之后，我想我在这里找到了一个解决方案：Jquery flowplayer - tabs - content inside div tags not displaying ...但仍然无法使其工作。

我是新来的jQuery，JavaScript和ASP所以，请温柔:)

预先感谢您的时间。

<div class="tabWrapper"> 
     <div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1"><span>Current Status</span></a></li> 
       <li><a href="#tabs-2"><span>Budget vs. Actual</span></a></li> 
       <li><a href="#tabs-3"><span>Projected Expense</span></a></li> 
       <li><a href="#tabs-4"><span>Expense History</span></a></li> 
      </ul> 
      <div id="tabs-1"> 
       <br /> 
       <asp:Panel ID="pnlNoDataFound" runat="server">No data available at this time.</asp:Panel> 
       <asp:GridView ID="expenditureSummaryGrid" class="multiRowCashTable" runat="server"></asp:GridView> 
      </div> <%--close tab 1--%> 
      <div id="tabs-2" > 
       <div class="buttonContainer"><button class="balanceButton" onclick="toggleButton('balance'); return false;" title="Help">Hide Balance Table</button></div> 
       <asp:GridView ID="balanceGrid" class="multiRowCashTable" runat="server"></asp:GridView> 
       <div class="buttonContainer"><button class="expenseButton" onclick="toggleButton('expense'); return false;" title="Help">Show Expense Table</button></div> 
       <asp:GridView ID="expenseGrid" class="multiRowCashTable" runat="server"></asp:GridView> 
       <div class="buttonContainer"><button class="budgetButton" onclick="toggleButton('budget'); return false;" title="Help">Show Budget Table</button></div> 
       <asp:GridView ID="budgetGrid" class="multiRowCashTable" runat="server"></asp:GridView> 
      </div> <%--Close Tab 2--%> 
      <div id="tabs-3"> 
       <asp:Panel ID="divProjectionHeader" runat="server">     
        <table class="tblProjectHeader"> 
         <tr> 
          <td><asp:label ID="Label1" class="makeBold" runat="server" >Current Award Year: </asp:label><asp:label id="lblCurrAwardYear" runat="server" ></asp:label></td> 
          <td><asp:label ID="Label2" class="makeBold" runat="server" >Months Remaining: </asp:label><asp:label id="lblRemainingMonths" runat="server" ></asp:label></td> 
          <td><asp:label ID="Label3" class="makeBold" runat="server" >Burn Rate Months: </asp:label> 
           <asp:DropDownList id="selBurnRateMonths" 
            AutoPostBack="True" 
            EnableViewState="True" 
            runat="server"> 
            <asp:ListItem Selected="True" Value="12">12</asp:ListItem> 
            <asp:ListItem Value="9">9</asp:ListItem> 
            <asp:ListItem Value="6">6</asp:ListItem> 
            <asp:ListItem Value="4">4</asp:ListItem> 
            <asp:ListItem Value="3">3</asp:ListItem> 
            <asp:ListItem Value="2">2</asp:ListItem> 
            <asp:ListItem Value="1">1</asp:ListItem>       
           </asp:DropDownList> 
          </td> 
          <td><asp:label ID="Label4" class="makeBold" runat="server" >Months Included:</asp:label><asp:label id="lblBurnRateMonths" runat="server" ></asp:label></td> 
         </tr> 
        </table>          
       </asp:Panel> 
       <br /><br /> 
       <asp:Panel ID="pnlProjection" runat="server"></asp:Panel> 
       <br /> 
       <asp:Panel ID="divCalc" runat="server"> 
        <button id="calcButton" onclick="calcAdjustedBalance(); return false;" >Calc</button> 
        <button id="zeroButton" onclick="calcZero(); return false;" >Zero</button> 
        <button id="resetButton" onclick="resetForm(); return false;" >Reset</button> 
       </asp:Panel> 
      </div> <%--Close tab 3--%> 
      <div id="tabs-4" > 
       <p>Hello</p> 
      </div> <%--Close tab 4--%> 
     </div> <%--Close tabs--%>   
    </div> <%--Close Tab Wrapper--%> 

初始化逻辑：如果

// On Doc Ready 
    $(document).ready(function() { 

     // Config Tabs 
     $(function() { 
      $('#tabs').tabs(); 
     }); // End Config Tabs 

不知道这会有所帮助，但我加入第四标签之前注意到奇怪的索引行为。我使用select动态改变打开的初始标签：

If IsPostBack Then 

     Dim SenderName As String 
     SenderName = clsWebUtil.GetPostBackControl(Me) 

     If SenderName = "selBurnRateMonths" Then 
      hfSelectedTab.Value = 3 
     Else 
      hfSelectedTab.Value = 0 
     End If 

    End If 

奇怪的部份是，该指数已经是“3”进入第三个选项卡。由于它们是基于零的，我认为它应该是索引“2”。也许在“制表符-2”的嵌入式div会导致这个问题？

Answer 1

我有同样的问题。玩了几个小时后，结果发现嵌套div和jQuery Accordion s搞乱了最后一个标签莫名其妙。我结束了将我的最后一个标签的标记移动到第一个标签的顶部。在你的情况，这将会是像

<div id="tabs-4" > 
    <p>Hello</p> 
</div> 
<div id="tabs-1"> 
    <br /> 
    <asp:Panel ID="pnlNoDataFound" runat="server">No data available at this time.</asp:Panel> 
    <asp:GridView ID="expenditureSummaryGrid" class="multiRowCashTable" runat="server"></asp:GridView> 
</div> 

注意，在运行时，标签将在相同的顺序列表显示：

<ul> 
    <li><a href="#tabs-1"><span>Current Status</span></a></li> 
    <li><a href="#tabs-2"><span>Budget vs. Actual</span></a></li> 
    <li><a href="#tabs-3"><span>Projected Expense</span></a></li> 
    <li><a href="#tabs-4"><span>Expense History</span></a></li> 
</ul> 

所以移动标记不会改变排序。