jQuery UI 选项卡，单击不同选项卡时更新 url
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9777518/
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
jQuery UI tabs, update url when clicking on a different tab
提问by Jerome Ansia
I'm using the tabs of jQuery UI: http://jqueryui.com/demos/tabs/
我正在使用 jQuery UI 的选项卡：http: //jqueryui.com/demos/tabs/
How to update the current url of the browserwhen the user click on a different tab by adding the anchor link to it: ex: url.html#tab-4and pushing the current history of the browser at the same time.
如何通过添加锚链接来在用户单击不同选项卡时更新浏览器的当前 url ： 例如：url.html#tab-4并同时推送浏览器的当前历史记录。
Thank you!
谢谢！
采纳答案by DG3
This should get what you want (using jQuery UI 1.8, in version 1.9 and later use the activate event, see other answers for code example). I used the sample HTML in jQuery UI demos;
这应该会得到您想要的（使用jQuery UI 1.8，在 1.9 版及更高版本中使用activate 事件，请参阅代码示例的其他答案）。我在 jQuery UI 演示中使用了示例 HTML；
$( "#tabs" ).tabs({
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
});
回答by Jeff B
For jQuery UI 1.10and later showhas been deprecated in favor of activate. Also idis no longer valid jQuery. Use .attr('id')instead. Finally, use on('tabsactivate')instead of bind().
对于jQuery UI 1.10及更高版本show，已弃用activate. 也id不再是有效的 jQuery。使用.attr('id')来代替。最后，使用on('tabsactivate')代替bind()。
$(function() {
$("#tabs").tabs({
activate: function(event, ui) {
window.location.hash = ui.newPanel.attr('id');
}
});
});
Post-creation method:
后期制作方法：
$("#myTabs").on( "tabsactivate", function(event, ui) {
window.location.hash = ui.panel.id;
});
Demo: http://jsfiddle.net/RVHzV/
演示：http: //jsfiddle.net/RVHzV/
Observable result: http://jsfiddle.net/RVHzV/show/light/
可观察结果：http: //jsfiddle.net/RVHzV/show/light/
Earlier Version of JQuery
早期版本的 JQuery
Add a handler to your tab call to update the location hash with the tab id:
将处理程序添加到您的选项卡调用以使用选项卡 ID 更新位置哈希：
$("#myTabs").tabs({
// options ...
show: function(event, ui) {
window.location.hash = ui.panel.id;
}
});
You can also add this after your UI Tabs are created:
您还可以在创建 UI 选项卡后添加此内容：
$("#myTabs").bind( "tabsshow", function(event, ui) {
window.location.hash = ui.panel.id;
});
Code demo: http://jsfiddle.net/jtbowden/ZsUBz/1/
代码演示：http: //jsfiddle.net/jtbowden/ZsUBz/1/
Observable result: http://fiddle.jshell.net/jtbowden/ZsUBz/1/show/light/
可观察结果：http: //fiddle.jshell.net/jtbowden/ZsUBz/1/show/light/
回答by Dejan Milosevic
First, we need to update the hash on tab change (this is for latest jQueryUI):
首先，我们需要更新选项卡更改时的哈希值（这是针对最新的 jQueryUI）：
$('#tabs').tabs({
beforeActivate: function (event, ui) {
window.location.hash = ui.newPanel.selector;
}
});
Then we need to update the active tab on hash change (i.e. enabling browser history, back/forward buttons and user typing in the hash manually):
然后我们需要更新哈希更改的活动选项卡（即启用浏览器历史记录、后退/前进按钮和用户手动输入哈希）：
$(window).on('hashchange', function () {
if (!location.hash) {
$('#tabs').tabs('option', 'active', 0);
return;
}
$('#tabs > ul > li > a').each(function (index, a) {
if ($(a).attr('href') == location.hash) {
$('#tabs').tabs('option', 'active', index);
}
});
});
回答by Mukesh Rana
$( "#tabs" ).tabs({
activate: function(event, ui) {
//Key => random string
//url => URL you want to set
window.history.pushState({key:'url'},'','url');
}
});
回答by Billkamm
I had to use "create" instead of "activate" to get my initial tab to show in the URL:
我必须使用“创建”而不是“激活”来让我的初始选项卡显示在 URL 中：
$('#tabs').tabs({
create: function(event, ui) {
window.location.hash = ui.panel.attr('id');
}
});
This solution seems to be working for changing the URL, but when I go back to the URL it doesn't switch tabs for me. Do I have to do something special to make it switch tabs when that URL is hit?
此解决方案似乎适用于更改 URL，但是当我返回 URL 时，它不会为我切换选项卡。我是否必须做一些特殊的事情才能在点击该 URL 时切换选项卡？
回答by eleclair
Building off of Jeff B's work above...this works with jQuery 1.11.1.
建立在 Jeff B 上面的工作之上……这适用于 jQuery 1.11.1。
$("#tabs").tabs(); //initialize tabs
$(function() {
$("#tabs").tabs({
activate: function(event, ui) {
var scrollTop = $(window).scrollTop(); // save current scroll position
window.location.hash = ui.newPanel.attr('id'); // add hash to url
$(window).scrollTop(scrollTop); // keep scroll at current position
}
});
});
回答by Rahul Desai
A combination of the other answers here worked for me.
这里其他答案的组合对我有用。
$( "#tabs" ).tabs({
create: function(event, ui) {
window.location.hash = ui.panel.attr('id');
},
activate: function(event, ui) {
window.location.hash = ui.newPanel.attr('id');
}
});
回答by Progrower
I used this method within my jQuery responsive tabs to hash the url with the active tab.
我在我的 jQuery 响应标签中使用了这个方法来散列带有活动标签的 url。
$(function() {
$('#tabs, #subtabs').responsiveTabs({
activate: function(event, ui) {
window.location.hash = $("ul li.r-tabs-state-active a").attr("href");
},
startCollapsed: 'accordion'
});
});
