使用jquery ui制表符更改location.hash

Question

我一直在尝试找到一种方法将window.location.hash更改为Jquery UI选项卡中当前选定的选项卡.

我试过了:

$("#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有关.接受的答案和略微修改的其他建议答案都有效.谢谢大家.

Answer 1

在您的事件处理函数中ui.tab是一个锚元素.您可以像这样检索其哈希值:

$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) { 
    window.location.hash = ui.tab.hash;
})

这对你有用吗？

Answer 2

$('#tabs').tabs({
    select: function(event, ui) {
        window.location.hash = ui.tab.hash;
    }
});

Answer 3

虽然上面的一些解决方案有效,但它们会导致页面在某些情况下跳转,因为window.location.hash API旨在将您带到页面的特定部分.

这里提出的这个简洁的解决方案解决了这个问题

  $("#tabs").bind("tabsshow", function(event, ui) { 
    history.pushState(null, null, ui.tab.hash);
  });

Answer 4

这对我有用,jQuery UI 1.10:

$('#elexumaps_events_tabs').tabs({
    activate: function(event, ui) { 
       window.location.hash=ui.newPanel.selector; 
    }
});

另见:http://api.jqueryui.com/tabs/#event-activate

Answer 5

我没有跳跃的简单解决方案

    $("#tabs").tabs({
        activate: function (event, ui) {
            var scrollPos = $(window).scrollTop();
            window.location.hash = ui.newPanel.selector;
            $(window).scrollTop(scrollPos);
        }
    });