在post back上保持当前jQuery选项卡?

在ASP.NET,您可以将其存储在隐藏字段中,而不必使用cookie(不需要jQuery cookie引用)。

使用此选项:

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

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

基本上,在选择选项卡时,您将所选选项卡值存储在asp隐藏字段中。然后显示您正在检索值。

对于较新版本的jQuery和jQuery UI,这将是:

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

“selected”选项替换为“active”。。。当然,您仍然需要添加隐藏字段:

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

built-in support 对于 jQuery cookie plugin direct download ). 你这样使用它:

$("#tabs").tabs({
  cookie: { expires: 7 }  //1 week
});

这与跨postback维护不同,但通常可以提供所需的效果。

试试这个:

添加到页面:

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

$(function () {
    var activeIndex = parseInt($get("hdnSelectedTab").value);
    $("#tabs").tabs({
        active: activeIndex,
        activate: function (event, ui) {
            $get("hdnSelectedTab").value = ui.newTab.index();
        }
    });
});

这个解决方案对我有效:来源 http://saradesh.com/tajuddin/index.php/keep-the-selected-jquery-tab-active-on-partial-post-back-in-asp-net/

<script type="text/javascript">
        var selTab;
        $(function () {
            var tabs = $("#tabs").tabs({
                show: function () {
                    //get the selected tab index
                    selTab = $('#tabs').tabs('option', 'selected');

                }
            });

        });

    function pageLoad(sender, args) {

        if (args.get_isPartialLoad()) {

            $("#tabs").tabs({show: function () {
                    //get the selected tab index on partial postback
                    selTab = $('#tabs').tabs('option', 'selected');

                }, selected: selTab  });

        }
    };

    </script>

var selected = $tabs.tabs('option', 'selected');

然后,您可以通过执行以下操作选择选项卡(完成文章后):

$tabs.tabs('select', selected);

我不是一个.NET的人,但是你可以钩住表单的submit()事件,将当前活动的选项卡和表单数据一起发送到服务器。这样,在实际生成DOM和JS时,只需在服务器端选择适当的选项卡即可。

有点像。。。

$("#the_form").submit(function(){
  var $form            = $(this);
      selected_tab_idx = $("#the_tabs").tabs( "option", "selected" );
  $('<input />', {type: hidden, name: 'tab_index', value: selected_tab_idx}).appendTo( $form );
  return true;
});

我正在使用cloudflare CDN中的jQuery3.5.0和jqueryui 1.12.1。

<%= hdnSelectedTab.ClientID %> 早在.net损坏名称时,就需要这样做。

// .aspx side
<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />

// in my js file 
$("#OpsManage").tabs({
        activate: function () {
        var selectedTab = $('#OpsManage').tabs('option', 'active');
        $("#hdnSelectedTab").val(selectedTab);
        },
    active: $("#hdnSelectedTab").val()
});

/// ********

这有点超出了操作。但是,我需要维护选项卡 和 纸卷:

//aspx side
<asp:HiddenField ID="hdnScrollPosition" runat="server" Value="0" />


// js file (inside ready)
var scroll = $('#hdnScrollPosition').val();
$('html').scrollTop(scroll);

/* maintain scroll across partial postbacks */
$(window).scroll(function (event) {
    scroll = $(window).scrollTop();
    $('#hdnScrollPosition').val(scroll);
});