获取动态生成的 jQuery UI 选项卡中第一个选项卡的名称答案

【问题标题】：Get name of first tab in dynamically generated jQuery UI tab获取动态生成的 jQuery UI 选项卡中第一个选项卡的名称
【发布时间】：2018-02-14 16:48:27
【问题描述】：

我有一个使用 asp.net 转发器创建的 jQuery UI 选项卡控件，并且正在尝试确保在页面加载时选择第一个选项卡，并在回发时保留选定的选项卡。

我已经完成了回发部分，但在获取第一个选项卡的名称时遇到了问题。我已将样式应用于选项卡。这就是我所拥有和尝试过的：

<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') 时会在下一行出现错误，因为 tab 尚未初始化。所以，我使用的是硬编码选项卡名称（'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>

【问题讨论】：

标签： c# asp.net jquery-ui tabs

【解决方案1】：

根据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()他们自己应用的。

【讨论】：

谢谢迪。我根据您的建议更新了帖子。
页面需要包含css样式。你是怎样做的？你能显示你的代码吗？我的意思是<link href=...。
谢谢迪。我确实定义并链接了样式，并且它们工作正常“如果”我删除了 $categories.tabs({active:0});但是，不会选择任何选项卡。如果我留下这段代码，则选择第一个选项卡但应用样式。这是我的问题。
样式不应该像<ul class="bronze nav nav-tabs" role="tablist"> 这样在转发器中定义。只需删除类并让tabs 函数执行。选项卡小部件将在创建选项卡时附加样式。检查example。在那里你可以看到<ul> 定义没有任何样式。使用开发人员工具，您可以看到在 tabs 小部件创建选项卡后附加了 css 类。
谢谢迪。该示例未显示在选项卡初始化后如何应用或可以应用任何自定义样式。假设我有以下样式，在 css 文件中定义并包含在页面中，我将如何设置选项卡？ ul.bronze.nav.nav-tabs {背景色：rgba(165, 124, 66, .85); padding-top: 6px;} ul.bronze.nav.nav-tabs>li>a {color: #fff;} ul.bronze.nav.nav-tabs>li.active>a { color:grey;} ul. Copper.nav.nav-tabs>li.hover>a {color:none;}