选择特定选项卡的 jQuery 选项卡

【问题标题】：jQuery tabs selecting specific tab选择特定选项卡的 jQuery 选项卡
【发布时间】：2010-07-01 22:29:06
【问题描述】：

我有一个包含一组 jQuery 选项卡的页面。所有选项卡都指向同一个目标 div，但通过 ajax 加载不同的内容。当我执行初始整页加载时，我需要根据各种因素设置不同的活动选项卡。目标 div 中的内容已经在服务器上设置为这个初始加载，所以我不需要单击选项卡，我只需要将正确的选项卡设置为“已选择”。我尝试将相关“li”html元素的类设置为“ui-tabs-selected”。这具有最初的预期效果，但是一旦加载页面，然后在选择另一个选项卡时，预选的选项卡不会关闭，而是选择了两个选项卡。

那么，有没有人知道另一种方法来预选一个选项卡（不会导致它被点击），或者我看到的奇怪的“ui-tabs-selected”行为的解决方案。

谢谢。

<script type="text/javascript">
    $(function() {
        $("#panelTabs").tabs({
            ajaxOptions: {
                error: function(xhr, status, index, anchor) {
                    $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible.");
                }
            }
        });

        $("#panelTabs").tabs({
            select: function(event, ui) {
                getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA');
            }
        });
    });
    </script>

以及构建 UL 的 C# 片段：

StringBuilder tabsLiteral = new StringBuilder();
            tabsLiteral.Append("<ul>");
            foreach (KeyValuePair<string, Tab> kvp in tabs)
            {
                tabsLiteral.Append("<li>");
                // Note - the kvp.Value.URI determines what should happen when the Tab is clicked
                tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>");
                tabsLiteral.Append("</li>");
            }
            tabsLiteral.Append("</ul>");
            _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString()));

            HtmlGenericControl ctl = new HtmlGenericControl();
            StringBuilder html = new StringBuilder();
            html.Append("<script type=\"text/javascript\">");
            html.Append("$(\"#panelTabs\").tabs({selected: 2});");
            html.Append("</script>");
            ctl.InnerHtml = html.ToString();
            _panelTabs.Controls.Add(ctl);

另一个版本：

StringBuilder tabsLiteral = new StringBuilder();
            tabsLiteral.Append("<ul>");
            foreach (KeyValuePair<string, Tab> kvp in tabs)
            {
                string active = "";
                if (currentTabCaption == kvp.Value.Caption)
                {
                    //active = " class=\"ui-tabs-selected\"";
                }
                tabsLiteral.Append("<li" + active + ">");
                // Note - the kvp.Value.URI determines what should happen when the Tab is clicked
                tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>");
                tabsLiteral.Append("</li>");
            }
            tabsLiteral.Append("</ul>");
            _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString()));

            HtmlGenericControl ctl = new HtmlGenericControl();
            StringBuilder html = new StringBuilder();
            html.Append("<script type=\"text/javascript\">");
            //html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 
            html.Append(@"$(function() {
                alert('initialising tabs');
                $(""#panelTabs"").tabs({
                    ajaxOptions: {
                        error: function(xhr, status, index, anchor) {
                            $(anchor.hash).html(""Couldn't load this tab. We'll try to fix this as soon as possible."");
                        }
                    },
                    select: function(event, ui) {
                        getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA');
                    }
                });
            });");
            html.Append("$(\"#panelTabs\").tabs({selected: 2});");
            html.Append("</script>");
            ctl.InnerHtml = html.ToString();
            //_panelTabs.Controls.Add(ctl);
            Page.Controls.Add(ctl);

【问题讨论】：

• 你有一个代码示例来展示这一点吗？
• 请注意确定这是否是您所追求的，但这里是构建 li 的 C# 片段： if (currentTabCaption == kvp.Value.Caption) { active = " class=\"ui -tabs-selected\""; } tabsLiteral.Append("
• "); // 注意 - kvp.Value.URI 确定点击 Tab 时应该发生什么 tabsLiteral.Append(" " + kvp.Value.Caption + ""); tabsLiteral.Append("
");