我有一个 jQuery UI 选项卡控件，它是使用 asp.net 转发器创建的，我试图确保在页面加载时选择第一个选项卡，并在回发时保留所选选项卡。
我已经解决了回发部分，但在获取第一个选项卡的名称时遇到问题。我已将样式应用于选项卡。这是我所拥有的和尝试过的:
<div id="divCategories">
<asp:Repeater runat="server" ID="rptCategories">
<HeaderTemplate>
<ul class="bronze nav nav-tabs" role="tablist">
</HeaderTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
<ItemTemplate>
<li>
<a href='#<%# Eval("Abbrev")%>' data-toggle="tab" aria-controls='<%# Eval("Abbrev")%>'>
<p class="tab title"><%# Eval("CourseCategory")%></p>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:HiddenField ID="hfSelCat" runat="server" />
<script type="text/javascript">
$(function () {
debugger
//$("#divCategories").tabs();
var tabName = $("[id*=hfSelCat]").val() != "" ? $("[id*=hfSelCat]").val() : 'AnOps';//$("#divCategories").tabs('option', 'active');
$('#divCategories a[href="#' + tabName + '"]').tab('show');
$("#divCategories a").click(function () {debugger
$("[id*=hfSelCat]").val($(this).attr("href").replace("#", ""));
});
});
</script>
如果我取消注释初始化选项卡的脚本中的第一行；我失去了标签样式；如果我将其注释掉，当我尝试访问 .tabs('option','active') 时，下一行会出现错误，因为选项卡尚未初始化。所以，我使用硬编码的选项卡名称(“AnOps”)；
因为选项卡名称是动态生成的，基本上我试图获取第一个选项卡的名称，无论它是什么。
更新(根据 Dee 的建议)
我修改了如下脚本；它确实将所选选项卡设置为第一个，但未应用任何样式。
<script type="text/javascript">
$(function () {
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
debugger
//$("#divCategories").tabs();
var tabName = $("[id*=hfSelCat]").val() != "" ? $("[id*=hfSelCat]").val() : 'AnOps';//$("#divCategories").tabs('option', 'active');
$('#divCategories a[href="#' + tabName + '"]').tab('show');
$("#divCategories a").click(function () {
$("[id*=hfSelCat]").val($(this).attr("href").replace("#", ""));
});
});
</script>
最佳答案
根据 active option 的文档，可以用整数值指定哪个选项卡将在初始化时处于事件状态(零将激活第一个选项卡)。如果我没记错的话，这就是您在页面加载时保持选中第一个选项卡所需的全部内容。
例子:
<script type="text/javascript">
$(function () {
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
});
</script>
要定义您自己的外观，可以在 Theme Roller 中编辑一些 jquery-ui 类。因此，您创建了 style-css 文件并将其链接到页面(可能是母版页)。然后只需调用 tabs() 函数即可应用样式。您不应该自己在 repeater 中定义样式。也许这是您在评论中提到的问题？
- 首先使用 Theme Roller 并生成您的样式。例如，我已将事件项目的背景和边框更改为黑红色(非常丑陋:))。
- 然后将生成的文件保存到本地文件夹，我将其保存到名为
js的文件夹，但名称并不重要。将生成的 css 文件链接到您的 asp.net 页面。这里我有一个简单的 html 文件的例子，但这并不重要。如您所见，<ul>没有任何样式。
Nobullman.html
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Demo</title> <script src="js/external/jquery/jquery.js"></script> <script src="js/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="js/jquery-ui.theme.css"> <link rel="stylesheet" type="text/css" href="js/jquery-ui.structure.css"> </head> <body> <!-- This content will be generated by the Repeater, but withou any styles --> <div id="divCategories"> <ul> <li><a href="#tabs-1">1.Tab</a></li> <li><a href="#tabs-2">2.Tab</a></li> <li><a href="#tabs-3">3.Tab</a></li> </ul> <div id="tabs-1"> <p>Text 123</p> </div> <div id="tabs-2"> <p>Text 456</p> </div> <div id="tabs-3"> <p>Text 789</p> </div> </div> <script type="text/javascript"> $(function() { // tabs will do the trick and create the tabs css styles inclusive var $categories = $("#divCategories"); $categories.tabs({ active: 0 }); }); </script> </body> </html>
Nobullman.html和 Theme Roller 中保存的文件的关系如下所示:
- 当浏览器加载此 html 文件时，它看起来像这样。这些样式由
jquery-ui-tabs()自行应用。
关于c# - 获取动态生成的 jQuery UI 选项卡中第一个选项卡的名称，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48792270/