Question

我在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

Answer 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

Answer 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 ready函数根据hiddenfield的值告诉显示哪个选项卡：

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

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

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

jquery ui tabs在asp.net中选择页面加载

2 个答案: