使用 jquery ui 选项卡更改 location.hash
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/570276/
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
changing location.hash with jquery ui tabs
提问by Rob
I've been trying to find a way to change the window.location.hash to the currently selected tab in Jquery UI Tabs.
我一直试图找到一种方法将 window.location.hash 更改为Jquery UI Tabs 中当前选定的选项卡。
I've tried:
我试过了：
$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location.hash = ui.tab;
})
This results in changing the hash to #undefined when the tab is changed.
这会导致在更改选项卡时将哈希更改为 #undefined。
I've also tried:
我也试过：
$("#tabs > ul").tabs({
select: function(event, ui) {
window.location.hash = ui.tab }
});
But this doesn't seem to be triggered at all.
但这似乎根本没有触发。
Any help would be appreciated. Thanks.
任何帮助，将不胜感激。谢谢。
Edit: It looks like part of my initial problem had something to do with js somewhere else interfering with this. Both the accepted answer and the other suggested answer slightly modified do work. Thanks all.
编辑：看起来我最初的问题的一部分与其他地方的 js 干扰有关。接受的答案和其他稍微修改的建议答案都有效。谢谢大家。
回答by Serxipc
In your event handler function ui.tabis an anchor element. You can retrieve its hash value like this:
在您的事件处理函数中ui.tab是一个锚元素。您可以像这样检索其哈希值：
$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location.hash = ui.tab.hash;
})
Does this work for you?
这对你有用吗？
回答by Herman van der Meulen
$('#tabs').tabs({
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
});
回答by n8vision
While some of the above solutions work, they cause the page to jump around in some cases, as the window.location.hash API is designed to bring you to a specific part of the page.
虽然上述一些解决方案有效，但它们在某些情况下会导致页面跳转，因为 window.location.hash API 旨在将您带到页面的特定部分。
This neat solution proposed here, solves that issue
这里提出的这个巧妙的解决方案解决了这个问题
$("#tabs").bind("tabsshow", function(event, ui) {
history.pushState(null, null, ui.tab.hash);
});
回答by romaninsh
This worked for me, jQuery UI 1.10:
这对我有用，jQuery UI 1.10：
$('#elexumaps_events_tabs').tabs({
activate: function(event, ui) {
window.location.hash=ui.newPanel.selector;
}
});
回答by Arthur
my simple solution without jumping:
我没有跳跃的简单解决方案：
$("#tabs").tabs({
activate: function (event, ui) {
var scrollPos = $(window).scrollTop();
window.location.hash = ui.newPanel.selector;
$(window).scrollTop(scrollPos);
}
});
回答by Thomas Higginbotham
Many of the above answers don't work with the current version of jQuery UI Tabs. Here's what I'm currently using:
上述许多答案不适用于当前版本的 jQuery UI 选项卡。这是我目前正在使用的：
var tabsUi = $('#tabs');
tabsUi.tabs();
// Add hash to URL when tabs are clicked
tabsUi.find('> ul a').click(function() {
history.pushState(null, null, $(this).attr('href'));
});
// Switch to correct tab when URL changes (back/forward browser buttons)
$(window).bind('hashchange', function() {
if (location.hash !== '') {
var tabNum = $('a[href=' + location.hash + ']').parent().index();
tabsUi.tabs('option', 'active', tabNum);
} else {
tabsUi.tabs('option', 'active', 0);
}
});
回答by hunter
Would this be what you're going for?
这会是你的目的吗？
$("#tabs > ul").tabs({
select: function(event, ui)
{
window.location = "#" + ui.tab;
}
});
回答by hunter
$('#tabs').tabs({
select: function(event, ui){
window.location = ui.tab.href;
}
});
回答by QuiGonJin2
My way for jQuery UI 1.10.3
我的 jQuery UI 1.10.3 方式
$("#tabs").tabs({
beforeActivate: function(event, ui) {
var hash = ui.newTab.children("li a").attr("href");
window.location.hash = hash;
}
});
回答by Andrew
This worked for me using Jquery 1.8
这对我使用 Jquery 1.8 有用
$('#tabs').tabs({
activate: function(event, ui) {
window.location.hash = ui.newPanel.attr('id');
}
});
