jQuery选项卡选择特定选项卡

我有一个包含一组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,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);

解决方法

您可以在选项卡切换功能内部的第一行删除所选的类：

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