【发布时间】：2012-11-05 19:32:01
【问题描述】：
在我添加第四个 jQuery 选项卡之前，我有一个简单的 asp.net 网页可以正常工作。无论我在第 4 个选项卡上放置什么内容，都不会呈现任何内容。
在搜索了大约十几个 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
不确定这是否有帮助，但在添加第四个选项卡之前，我注意到了奇怪的索引行为。我使用选择来动态更改打开的初始选项卡：
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”。也许“tabs-2”上的嵌入式 div 会导致问题？
【问题讨论】：
-
你能告诉我们你是如何在 jQuery 中初始化标签的吗？
-
附加代码遵循这个 sn-p: // On Doc Ready $(document).ready(function () { // 配置选项卡 $(function () { $('#tabs'). tabs(); }); // 结束配置标签
-
代码一目了然。这可能听起来很傻，但是您是在刷新浏览器之前构建的吗？
-
我已保存页面并重建了解决方案。我在 Visual Studio 2010 中使用“在浏览器中查看”来检查页面。
-
看起来不错。 javascript 控制台是否给您任何错误？