我一直在尝试找到一种方法将window.location.hash更改为Jquery UI Tabs中当前选中的标签。
我试过了:
$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location.hash = ui.tab;
})
这会导致在更改选项卡时将哈希值更改为#undefined。
我也试过了:
$("#tabs > ul").tabs({
select: function(event, ui) {
window.location.hash = ui.tab }
});
但这似乎根本没有触发。
任何帮助将不胜感激。感谢。
编辑:看起来我的初始问题的一部分与其他地方干扰这个问题的js有关。接受的答案和略微修改的其他建议答案都有效。谢谢大家。
答案 0 :(得分:49)
在您的事件处理函数中,ui.tab
是一个锚元素。您可以像这样检索其哈希值:
$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location.hash = ui.tab.hash;
})
这对你有用吗?
答案 1 :(得分:25)
$('#tabs').tabs({
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
});
答案 2 :(得分:14)
虽然上述某些解决方案有效,但在某些情况下会导致页面跳转,因为window.location.hash API旨在将您带到页面的特定部分。
这个简洁的解决方案提出here,解决了这个问题
$("#tabs").bind("tabsshow", function(event, ui) {
history.pushState(null, null, ui.tab.hash);
});
答案 3 :(得分:8)
这对我有用,jQuery UI 1.10:
$('#elexumaps_events_tabs').tabs({
activate: function(event, ui) {
window.location.hash=ui.newPanel.selector;
}
});
答案 4 :(得分:6)
我没有跳跃的简单解决方案:
$("#tabs").tabs({
activate: function (event, ui) {
var scrollPos = $(window).scrollTop();
window.location.hash = ui.newPanel.selector;
$(window).scrollTop(scrollPos);
}
});
答案 5 :(得分:4)
这会是你想要的吗?
$("#tabs > ul").tabs({
select: function(event, ui)
{
window.location = "#" + ui.tab;
}
});
答案 6 :(得分: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;
}
});
答案 7 :(得分:3)
上述许多答案都不适用于当前版本的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);
}
});
答案 8 :(得分:3)
$('#tabs').tabs({
select: function(event, ui){
window.location = ui.tab.href;
}
});
答案 9 :(得分:1)
我正在使用一个标签插件,你可以在github上找到它:https://github.com/jquerytools/jquerytools.github.com
答案 10 :(得分:1)
这对我来说使用Jquery 1.8
$('#tabs').tabs({
activate: function(event, ui) {
window.location.hash = ui.newPanel.attr('id');
}
});
答案 11 :(得分:1)
在查看了一些其他问题和jQueryUI API文档后,我发现这最终为我工作。
$(document).ready(function() {
$("#tabs").tabs({
activate: function( event, ui ) {
location.hash = ui.newTab.children(".ui-tabs-anchor").attr("href").substr(1);
}
});
});
答案 12 :(得分:0)
似乎ui.tab本身不会返回有效的字符串。 (相反,它返回undefined,所以你说它根本不返回任何东西。)
尝试在ui.jquery.js的dev版本中查看是否有任何返回,也许你必须调用ui.tab的子项; - )
答案 13 :(得分:0)
此代码适用于我:
$('#tabs').tabs({
select: function(event, ui) {
window.location = $(ui.tab).attr('href');
}
});
答案 14 :(得分:0)
此代码适用于我:
$("#tabs").tabs({
activate: function(event, ui) {
window.location.hash=ui.newPanel.selector;
}
});
答案 15 :(得分:0)
以下代码适用于我..
$("#tabs").tabs({
activate : function(event, ui) {
window.location.hash = ui.newPanel[0].id;
}
});
答案 16 :(得分:0)
我的工作解决方案。
jQuery v3.5.1,jQuery UI v1.12.1
$(".detail-groups").tabs({ activate: function(event, ui) {
window.location.hash = ui.newPanel[0].id;
}
});
答案 17 :(得分:-1)
这段代码对我有用:
window.location.hash="";