jquery ui选项卡在asp.net中的页面加载上选择答案

【问题标题】：jquery ui tabs select on page load in asp.netjquery ui选项卡在asp.net中的页面加载上选择
【发布时间】：2013-01-28 19:25:03
【问题描述】：

我在 asp.net 中有 jqueryUI 选项卡。一切正常，但默认情况下第一个选项卡正在打开。我正在模式弹出窗口中执行一些代码，我希望当用户单击操作按钮时，回发位于触发弹出窗口的选项卡中。这是 jquery ui 选项卡代码：

<ul>
    <li><a href="#tabs-1">Tab1</a></li>
    <li><a href="#tabs-2">Tab2</a></li>
    <li><a href="#tabs-3">Tab3</a></li>
  </ul>
  <div id="tabs-1">   
  </div>
  <div id="tabs-2">           
  </div>
  <div id="tabs-3">  
  </div>

我想知道如何在页面加载时选择默认打开哪个选项卡，例如，如果我在查询字符串中有： mypage.aspx?tab=1 或 mypage.aspx?tab=2 其他一些例子可能会更好。在此先感谢 Laziale

【问题讨论】：

您是打算添加额外的查询字符串参数，还是只在查询字符串中添加?tab=val？
@OhGodwhy 我此时有 clientID 参数，如果有帮助，我会添加另一个参数。谢谢

标签： javascript jquery asp.net jquery-ui webforms

【解决方案1】：

使用this question 中的getParameterByName 函数获取值：

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

然后做这样的事情：

$("#tabs").tabs({
    create: function(event, ui){
       var index = parseInt(getParameterByName("tab"));
       $(this).tabs("option", "active", index);
    }
});

希望这对您有所帮助，如果您有任何问题，请告诉我！

链接：

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

【讨论】：

这里是 Dom 所说的选项的jQuery UI documentation page。
@Dom 感谢您的回复。除了分解标签之外，使用问题的第二部分不会做任何事情。我也试过 $(this).tabs('option', 'selected', '2');只是看看它是否会选择不同的选项卡，但它给了我相同的布局。
@Laziale 嗯，这很奇怪...jsfiddle.net/yTMwu/34。我刚刚做了一个测试，它似乎应该可以工作。您能否进行一些修改，使其与您目前拥有的相似？
@GalacticCowboy 感谢链接参考！我会把它添加到我的帖子中。
@Dom 现在就像一个魅力，谢谢，这正是我所需要的。享受美好的一天

【解决方案2】：

听起来你想要我昨天解决这个问题时想要的两件事：(1) 指定起始选项卡的能力，以及 (2) 控制从页面回发后打开哪个选项卡。一种方法：在 .aspx 中包含一个隐藏字段：

<asp:HiddenField runat="server" ID="hfLastTab" Value="0" />

（假设第一个/第 0 个选项卡是您的默认选项，如果没有指定）。在 Page_Load() 中，提供一个 !Page.IsPostBack 分支来解析查询字符串参数，并设置隐藏字段的值：

    if (!Page.IsPostBack) {
        string pat = @"t=(\d)";
        Regex r = new Regex(pat, RegexOptions.IgnoreCase);
        Match m = r.Match(Request.Url.Query);
        if (m.Success) hfLastTab.Value = m.Groups[0].ToString();
    }

最后，jQuery 就绪函数根据隐藏字段的值告诉要显示哪个选项卡：

    $(function () {
        $("#tabs").tabs({ active: <%= hfLastTab.Value %> });
    });

服务器端回发处理代码同样可以将 hfLastTab.Value 设置为适当的索引。如果您的模态弹出窗口可以由多个选项卡引发，并且您不知道控件要打开哪个选项卡，那么您将不得不做更多的工作。从一个类似问题的答案来看，在 jQuery 中指定一个“激活”函数将在用户选择一个选项卡时设置 hiddenField 值，您可以从回发中读取该值：

$("#tabs").tabs({
    activate: function() {
        var selectedTab = $('#tabs').tabs('option', 'active');
        $("#<%= hfLastTab.ClientID %>").val(selectedTab);
    },
    active: <%= hfLastTab.Value %>
});

【讨论】：