9

我的 aspx 表单上有一些列出的选项卡控件，如下所示

 <div id="tabs">
    <ul>

        <li><a href="#tabs-1">Tab A</a></li>
        <li><a href="#tabs-2">Tab B</a></li>
        <li><a href="#tabs-3">Tab C</a></li>

    </ul>
<div id="tabs-1"></div>
<div id="tabs-2"><asp:Button ID="someid" runat="server"/></div>
<div id="tabs-3"></div>
</div>

鼠标单击选项卡上的导航通过以下方式完成：

 <script type="text/javascript">
    $(function () {
        $("#tabs").tabs();

    });
</script>

现在，我的问题是，即使在回发之后，我如何才能保持选定的选项卡不变。例如，我选择包含一个按钮的选项卡 B，该按钮会导致点击后回发。回发发生后，选项卡 A 重新定位焦点，我必须手动选择选项卡 B 进行辅助操作。

请帮我解决这个问题。

4

4 回答 4

5

使用指定的cookie选项初始化选项卡。 样本

$(function () {
   $("#tabs").tabs({ cookie: { expires: 30 } });
});

你需要 jQuery Cookie 插件..

于 2013-03-15T06:01:50.667 回答
5

我认为本准则会对您有所帮助...

<div id="tabs">
        <asp:HiddenField ID="hidtab" Value="0" runat="server" />
        <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">Tab 2</a></li>

        </ul>

        <div id="tabs-1">
            <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click"/>
        </div>

        <div id="tabs-2">
            <asp:Button ID="Button2" runat="server" Text="Submit" OnClick="Button2_Click"/>
        </div>
    </div>

<script type="text/javascript">
        $(document).ready(function () {
            var st= $(this).find("input[id*='hidtab']").val();
            if (st== null)
                st= 0;
            $('[id$=tabs]').tabs({ selected: st});
        });
    </script>

protected void Button1_Click(object sender, EventArgs e)
{
    hidtab.Value = "0";
}

protected void Button2_Click(object sender, EventArgs e)
{
    hidtab.Value = "1";
}
于 2013-03-15T08:01:41.383 回答
0

您可以像他们在这篇文章中所做的那样通过您的 URL 跟踪它。以下代码只是示例，可以做得更好。我使用了jquery ui tabsactive中的属性。它与元素的索引一起使用，但也许它与#hash 一起使用也没有测试它。所以在下面的例子中，我得到了标签的索引并将它与属性一起使用；active

<div id="tabs">
    <ul>

        <li><a href="#tabs-1">Tab A</a></li>
        <li><a href="#tabs-2">Tab B</a></li>
        <li><a href="#tabs-3">Tab C</a></li>

    </ul>
<div id="tabs-1"></div>
<div id="tabs-2"><asp:Button ID="someid" runat="server"/></div>
<div id="tabs-3"></div>
</div>

<script type="text/javascript">
    $(function () {
        var tabsOpts = {}, 
            activeTab, activeTabIndex,
            urlCheck = doucment.location.href.split('#');

        // urlCheck is an array so when there is more then one result
        // there is a hash found in the URL
        if( urlCheck.length > 1 ) {
            activeTab = urlCheck[1];

            // getting the index from the link
            activeTabIndex = $("#tabs li a[href="+ activeTab +"]").index();

            // create new object options for the tabs
            tabsOpts = { active: activeTabIndex };
        }

        $("#tabs").tabs(tabsOpts)
        .find('li a').each(function() {
            // get URL from the tab href
            var href = $.data(this, 'href.tabs');
            // set URL with the href from your tab
            document.location = href;
        });
    });
</script>
于 2013-03-15T07:12:33.593 回答
0

客户端解决方案：

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(IniciaRequest);
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
var currentTab;

function IniciaRequest(sender, arg) {
  var _Instance = Sys.WebForms.PageRequestManager.getInstance();

  if (_Instance.get_isInAsyncPostBack()) {
    window.alert("Existe un proceso en marcha. Espere");
    arg.set_cancel(true);
  }
}

function BeginRequestHandler(sender, args) {
  //Persiste el valor del indice del TAB actual del control Jquery para mantener el tab actual seleccionado luego del Postback.
  if ($get('hdCurrentTab') != null) {
    currentTab = $get('hdCurrentTab').value;
  }
  //----
}

function EndRequestHandler(sender, args) {
  //Permite visualiza el control JQuery TAB dentro de ventanas modales AJAX.
  if (sender._postBackSettings.panelsToUpdate != null) {
    $("#tabs").tabs();

    //Persiste el valor del indice del TAB actual del control Jquery para mantener el tab actual seleccionado luego del Postback.
    if ($get('hdCurrentTab') != null) {
      $get('hdCurrentTab').value = currentTab;
      $("#tabs").tabs({ active: currentTab });
    }
    //----
  }
  //----
}
</script>

页面上的 HTML：

<input id="hdCurrentTab" type="hidden" value="0" />
<div id="tabs" style="width:97%;margin: auto; font-family: verdana, tahoma, arial, sans-serif; font-size: 11px;">
  <ul>
    <li><a href="#tabs-1" onclick="$get('hdCurrentTab').value = '0';">TAB1</a></li>
    <li><a href="#tabs-2" onclick="$get('hdCurrentTab').value = '1';">TAB2</a></li>
  </ul>
  <div id="tabs-1"></div>
  <div id="tabs-2"></div>
</div>

回发后 TAB 保持选中状态。

于 2016-03-03T15:57:51.863 回答