jQuery选项卡选择特定选项卡 [英] jQuery tabs selecting specific tab

问题描述

我有一个页面，其中包含一组jQuery选项卡.所有选项卡都指向相同的目标div，但是通过ajax加载了不同的内容.在执行初始整页加载时，我需要根据各种因素对活动选项卡进行不同的设置.目标div中的内容已经在服务器上设置了此初始加载，因此不需要单击选项卡，只需将正确的选项卡设置为选定"即可.我尝试将相关的"li" html元素的类设置为"ui-tabs-selected".这具有最初的预期效果，但是一旦页面被加载，则在选择另一个选项卡时，预选的选项卡不会关闭，从而使两个选项卡处于选中状态.

I have a page containing a set of jQuery tabs. All the tabs point at the same target div, but load it with different content via ajax. When I perform the initial full page load I need to set the active tab differently depending upon various factors. The content in the target div is already set on the server for this initial load, so I don't need to click the tab, I just need to set the correct tab to 'selected'. I have tried setting the class of the relevant "li" html element to "ui-tabs-selected". This has the initial desired effect, but once the page is loaded then on selecting another tab the preselected one does not switch off, leaving two tabs selected.

因此，有人知道预选标签的另一种方法(不导致其被单击)，或者解决我所看到的奇怪的"ui-tabs-selected"行为的解决方案.

So, does anyone know an alternative way to preselect a tab (without causing it to be clicked), or a solution to the strange "ui-tabs-selected" behaviour that I am seeing.

谢谢.

<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#片段:

And the C# fragment that builds the UL:

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);

推荐答案

您可以在选项卡切换功能的第一行中删除所选的类:

You could have the first line inside of your tab toggle function remove the selected class:

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

这篇关于jQuery选项卡选择特定选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！