[英]jQuery UI tabs, update url when clicking on a different tab
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 browser when the user click on a different tab by adding the anchor link to it: ex: url.html#tab-4 and pushing the current history of the browser at the same time. 当用户通过添加锚链接点击其他选项卡时,如何更新浏览器的当前URL: ex:url.html#tab-4并同时推送浏览器的当前历史记录。
Thank you! 谢谢!
For jQuery UI 1.10 and later show
has been deprecated in favor of activate
. 对于jQuery UI 1.10和更高版本的
show
已被弃用,有利于activate
。 Also id
is no longer valid jQuery. id
也不再是有效的jQuery。 Use .attr('id')
instead. 请改用
.attr('id')
。 Finally, use on('tabsactivate')
instead of bind()
. 最后,使用
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: 在Tab键调用中添加处理程序,以使用选项卡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/
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). 这应该得到你想要的(使用jQuery UI 1.8 ,在1.9及更高版本中使用activate事件 ,请参阅代码示例的其他答案)。 I used the sample HTML in jQuery UI demos;
我在jQuery UI演示中使用了示例HTML;
$( "#tabs" ).tabs({
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
});
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 (ie 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);
}
});
});
$( "#tabs" ).tabs({
activate: function(event, ui) {
//Key => random string
//url => URL you want to set
window.history.pushState({key:'url'},'','url');
}
});
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. 这个解决方案似乎正在改变URL,但当我回到URL时,它不会为我切换标签。 Do I have to do something special to make it switch tabs when that URL is hit?
在点击该URL时,是否必须执行一些特殊操作才能使其切换选项卡?
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
}
});
});
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');
}
});
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'
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.