选择特定选项卡的 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屋！