个人中心
gpt4 book ai didi

c# - 获取动态生成的 jQuery UI 选项卡中第一个选项卡的名称

转载 作者：太空宇宙 更新时间：2023-11-03 12:18:08 25 4
gpt4 key购买 nike

我有一个 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 并生成您的样式。例如，我已将事件项目的背景和边框更改为黑红色(非常丑陋:))。

enter image description here

  • 然后将生成的文件保存到本地文件夹，我将其保存到名为 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 中保存的文件的关系如下所示:

enter image description here

  • 当浏览器加载此 html 文件时，它看起来像这样。这些样式由 jquery-ui-tabs() 自行应用。

enter image description here

关于c# - 获取动态生成的 jQuery UI 选项卡中第一个选项卡的名称，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48792270/

25 4 0
文章推荐： python - 使用 Pyx 绘制大括号
文章推荐： Android:处理 InputFilter 上的退格键
文章推荐： python - py2exe 和文件系统
文章推荐： android - 区域设置未在 Android 5.0 Lollipop 中以编程方式设置
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com