jQuery标签页选择特定标签

Question

我有一个包含一组jQuery选项卡的页面。所有选项卡都指向同一个目标div，但通过ajax加载不同的内容。当执行初始完整页面加载时，根据各种因素，我需要设置活动选项卡不同。目标div中的内容已在服务器上设置为此初始加载，因此我不需要单击选项卡，只需要将正确的选项卡设置为“selected”。我尝试将相关的“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);

- DEH

---

你有展示这个功能的代码示例吗？ - spinon

不确定你需要什么，但以下是构建li的C#片段： 如果(currentTabCaption == kvp.Value.Caption) { active = " class="ui-tabs-selected""; } tabsLiteral.Append("<li" + active + ">"); // 注意 - kvp.Value.URI 确定了当单击选项卡时应执行的操作 tabsLiteral.Append("<a id="" + kvp.Value.URI + "" href="#panelTabs">" + kvp.Value.Caption + "</a>"); tabsLiteral.Append("</li>"); - DEH

Answer 1

你需要的是 selected option 选项。例如：

$("#MyTabs").tabs({
  selected: 2 
});

- Gert Grenander

---

@Gert G - 谢谢，这个初始工作很好，但是后来表现出与“ui-tabs-selected”类别添加到li元素完全相同的行为，即在单击另一个选项卡时，我最终会有两个选项卡被选中。再次单击后，它会自动解决，只显示一个选项卡被选中。 - DEH

@Gert G - 我刚刚在最初的帖子中添加了一些代码片段。整个系统相当复杂，所以我不能轻易地发布一个完整的工作示例，但是希望这些片段能让您看到我正在做什么。我使用一个名为panelTabs的常见div来进行选项卡，并且此选项卡是由早期的C#动态添加到页面中的。JavaScript只是坐在主页面的顶部。 - DEH

@Gert G - 没有运气。它似乎根本没有做任何事情，即选择了第一个选项卡而不是我想要的选项卡。不过还是感谢您的所有帮助。 - DEH

@Gert 单一目标 div 对于系统的 UI 架构非常核心。有许多不同的选项卡集，每个选项卡始终将内容加载到相同的目标 div 中。我会尝试调整事件绑定并查看是否能取得任何进展。感谢您的建议。 - DEH

@DEH - 没问题。我很高兴你找到了解决方案。 - Gert Grenander

Answer 2

您可以在选项卡切换函数中的第一行删除所选类：

var uiTabsSelected = '.ui-tabs-selected';
$(uiTabsSelected).removeClass(uiTabsSelected);

- ethagnawl

---

谢谢，听起来是个好主意 - 我尝试将你的两行代码粘贴到函数中，但是JS在第一行报错（期望在第一个“-”字符处有;） - 你有什么想法吗？ - DEH

Answer 3

将此更改为：

html.Append("$(\"#panelTabs\").tabs({selected: 2});");

转换为：

html.Append("$(\"#panelTabs\").tabs('option','selected', 2);");

编辑： 还有...

$(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.");
                }},
            select: function(event, ui) {
                getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA');
            }
        });    

    });

- offner

---

在我的测试中，它根本没有选择选项卡，而早期版本选择了选项卡，但在单击另一个选项卡时没有“释放”它。 - DEH

@DEH 删除html.append...这一行，添加一个隐藏字段来保存所选选项卡的值，然后在初始化脚本中添加："，selected：$('[id*="TabToSelect"]').val()"，在代码后端设置TabToSelect的值。 - offner

@DEH 我之前漏掉了一个 }。另外，如果你在初始化选项卡后尝试选择选项卡，它会调用你的选择事件。这里有一个简单的例子：http://jsbin.com/anitu3 - offner

谢谢你的帮助 - 现在必须离开了，但明天会再次查看。 - DEH

Answer 4

如果有人在这里寻找答案，选择选项卡的当前（截至本日期）方法是使用“active”选项（jQuery UI 1.10）：

使用指定的活动选项初始化选项卡：

$( ".selector" ).tabs({ active: 1 });

http://api.jqueryui.com/tabs/#option-active

- camainc

Answer 5

解决方案是添加和删除类，正如ethagnawl所建议的那样。以下C#代码展示了正在构建的UL以及所需的jQuery脚本注入。重要部分在show：function中，在其中操纵类。正是这段代码解决了问题。

StringBuilder tabsLiteral = new StringBuilder();
            tabsLiteral.Append("<ul>");
            foreach (KeyValuePair<string, Tab> kvp in tabs)
            {
                //string tabClass = " class=\"ui-state-default\"";
                string tabClass = " class=\"ui-state-default\"";
                if (currentTabCaption == kvp.Value.Caption)
                {
                    tabClass = " class=\"ui-tabs-selected\"";
                }
                tabsLiteral.Append("<li" + tabClass + ">");
                //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('option','selected', 2);"); 
            html.Append(@"$(function() {
                $('#panelTabs').tabs({
                    select: function(event, ui) {
                        getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA');
                    },
                    show: function(event, ui) {
                        // You MUST set both 'ui-state-active' AND 'ui-tabs-selected' for tab UI to operate properly - if either are missing it doesn't work
                        $('.ui-tabs-selected').removeClass('ui-state-active').removeClass('ui-tabs-selected'); 
                        $(ui.tab).addClass('ui-state-active').addClass('ui-tabs-selected'); 

                        //$('#panelTabs').tabs('selected',idx); // WOULD have been nice if this had worked, but UI does not keep up
                     }
                });
            });");
            html.Append("</script>");
            ctl.InnerHtml = html.ToString();
            //Page.Header.Controls.Add(ctl); // NEVER place script in the page header when the script must survive an AJAX delivery - it won't run
            Page.Controls.Add(ctl); // Acceptable to place script on the page, as it WILL survive AJAX delivery

- DEH