在回传中停留在当前的 jQuery 选项卡上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3720796/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Staying on current jQuery tab across post back?
提问by Abe Miessler
I am using jQuery tabs and an ASP.NET listview to display and edit some information. My problem is that when a user inserts a new record in one of the listview items my jQuery tabs go back to the first tab. Is there a way to keep track of which tab I am on or keep it from resting on post back?
我正在使用 jQuery 选项卡和 ASP.NET 列表视图来显示和编辑一些信息。我的问题是，当用户在其中一个列表视图项中插入新记录时，我的 jQuery 选项卡会返回到第一个选项卡。有没有办法跟踪我在哪个标签上或防止它停留在回帖上？
回答by Lloyd Powell
In ASP.NET, you can store it in a hidden field without having to use a cookie (no need for the jQuery cookie reference).
在 ASP.NET 中，您可以将其存储在隐藏字段中，而无需使用 cookie（不需要 jQuery cookie 引用）。
Use this:
用这个：
$(function () {
$("#tabs").tabs({
activate: function() {
var selectedTab = $('#tabs').tabs('option', 'active');
$("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
},
active: <%= hdnSelectedTab.Value %>
});
});
Then in the body, declare your hidden tab field:
然后在正文中，声明您的隐藏选项卡字段：
<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
Basically, on selection of a tab you are storing the selected tabs value in the asp hidden field. Then on show you are retrieving the value.
基本上，在选择选项卡时，您将所选选项卡值存储在 asp 隐藏字段中。然后在节目中你正在检索价值。
回答by Eaglan Kurek
With newer versions of jQuery and jQuery UI, this will be:
使用较新版本的 jQuery 和 jQuery UI，这将是：
$(function () {
$("#tabs").tabs({
activate: function() {
var selectedTab = $('#tabs').tabs('option', 'active');
$("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
},
active: document.getElementById('<%= hdnSelectedTab.ClientID %>').value
});
});
The 'selected' option is replaced by 'active'... Of course you will still need to add the hidden field:
'selected' 选项被 'active' 取代...当然你仍然需要添加隐藏字段：
<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
回答by Nick Craver
There's built-in supportfor the jQuery cookie plugin(direct download). You use it like this:
还有的内置支持为jQuery的cookie的插件（直接下载）。你像这样使用它：
$("#tabs").tabs({
cookie: { expires: 7 } //1 week
});
It's not the same as maintaining across postback, but it usually provides the desired effect.
这与跨回发维护不同，但它通常会提供所需的效果。
回答by Olegs
Try this:
尝试这个：
Add to the page :
添加到页面：
<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
Add to the script:
添加到脚本中：
$(function () {
var activeIndex = parseInt($get("hdnSelectedTab").value);
$("#tabs").tabs({
active: activeIndex,
activate: function (event, ui) {
$get("hdnSelectedTab").value = ui.newTab.index();
}
});
});
回答by Bat_Programmer
This solution worked for me: Source http://saradesh.com/tajuddin/index.php/keep-the-selected-jquery-tab-active-on-partial-post-back-in-asp-net/
这个解决方案对我有用：来源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>
回答by Joe Johnston
I am using jquery 3.5.0 and jqueryui 1.12.1 from the cloudflare CDN.
我正在使用来自 cloudflare CDN 的 jquery 3.5.0 和 jqueryui 1.12.1。
In .NET >= 3.5 you can use the Ids without the <%= hdnSelectedTab.ClientID %>This was needed way back when .net mangled names.
在 .NET >= 3.5 中，您可以使用 Ids 而没有<%= hdnSelectedTab.ClientID %>This is required way back when .net mangled names.
So in your.js the following is working for me:
所以在 your.js 中，以下内容对我有用：
// .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()
});
/// ********
/// ********
This goes a little beyond the OP. However, I had need to maintain tab andscroll:
这有点超出了 OP。但是，我需要维护选项卡和滚动：
//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);
});
回答by JasCav
You can get the current tab by doing this:
您可以通过执行以下操作获取当前选项卡：
var selected = $tabs.tabs('option', 'selected');
You can then select the tab (upon completion of the POST) by doing this:
然后，您可以通过执行以下操作来选择选项卡（在 POST 完成后）：
$tabs.tabs('select', selected);
Note that tab selection is 0-based indexing, so selecting 2 means selecting the third tab.
请注意，选项卡选择是基于 0 的索引，因此选择 2 意味着选择第三个选项卡。
回答by BBonifield
I'm not an .NET guy, but you can probably hook onto the form's submit() event and send the currently active tab to the server with your form data. In that fashion, you can simply select the proper tab on the server side when you actually generate the DOM and JS.
我不是 .NET 专家，但您可能可以挂钩表单的 submit() 事件，并将当前活动的选项卡与表单数据一起发送到服务器。以这种方式，当您实际生成 DOM 和 JS 时，您可以简单地在服务器端选择正确的选项卡。
Something like...
就像是...
$("#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;
});
