jQuery选项卡选择特定选项卡

时间：2010-07-01 22:29:06

标签： jquery tabs jquery-ui-tabs

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

5 个答案:

答案 0 :(得分：22)

您正在寻找的是selected option。 E.g。

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

答案 1 :(得分：4)

您可以在标签切换功能中使用第一行删除所选的类：

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

答案 2 :(得分：1)

改变这个：

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

    });

答案 3 :(得分：1)

如果有其他人来这里寻找答案，当前（截至此日期）选择标签（jQuery UI 1.10）的方式是使用“active”选项：

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

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

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

答案 4 :(得分：0)

解决方案是添加和删除类，正如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
相关问题
最新问题