使用jQuery UI选项卡更改location.hash

Question

我一直在尝试找到一种方法，将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有关干扰了这个。接受的答案和稍微修改的其他建议的答案都有效。谢谢大家。

- Rob

---

你是想在点击链接的标签页中打开一个链接吗？ - Barbaros Alp

不，我打开的链接是当前页面本身的一部分，没有使用ajax等。 - Rob

这是一个非常棒的演示技术的示例：http://jqueryfordesigners.com/jquery-tabs/ - user399461

有没有一种解决方法，可以防止在单击选项卡时页面跳转到页面中的哈希锚点？ - Barry Chapman

Answer 1

在你的事件处理程序函数中，ui.tab是一个锚元素。你可以通过以下方式检索其哈希值：

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

这个对你有用吗？

- Serhii

---

很遗憾，页面加载或选项卡更改时我收到了许多“ui.tab未定义”的错误。 - Rob

我一直在尝试使用文档页面上出现的演示，它在FF 3和IE 7上运行良好。你是手动触发事件吗？ - Serxipc

我按照你建议的方法尝试了演示页面，并且你的解决方案最终确实起作用了，感谢你的解决方案。我需要找出在我的代码中还有什么阻止它正常工作的问题。谢谢。 - Rob

如果您正在Firefox上进行测试，请安装Firebug扩展并使用console.trace()跟踪问题的来源。 - Serxipc

Answer 2

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

- Herman van der Meulen

Answer 3

虽然上面提供的一些解决方案是有效的，但它们有时会导致页面跳动，因为window.location.hash API旨在将您带到页面的特定部分。

这里提出的巧妙解决方案here，解决了该问题。

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

- n8vision

---

这个答案可能应该被标记为正确答案。 - wblaschko

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

- romaninsh

---

这对我很有效，但是我正在使用ajax来加载我的选项卡，所以哈希始终为“ui-tabs-1”，“ui-tabs-2”等...这意味着当我重新排序、添加或删除选项卡时，书签会失效。您知道有没有一种方法可以使用自定义哈希名称来管理选项卡？ - Billkamm

Answer 5

我的简单解决方案，不需要跳转：

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

- Arthur

Answer 6

以上许多答案在当前版本的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);
    }
});

- Thomas Higginbotham

---

完美的解决方案，是唯一一个对我有效的 :) - Rafael Capucho

Answer 7

这是你想要的吗？

$("#tabs > ul").tabs({ 
   select: function(event, ui) 
   { 
      window.location = "#" + ui.tab;
   }
});

- Hunter

---

我尝试过这个，但没有成功。我甚至在window.location设置之前尝试了一个警告，但在更改选项卡时它并没有出现。唯一能让它激活的方法是绑定tabsshow，但这最终会导致ui.tab未定义。 - Rob

当我尝试使用稍作修改的演示代码时，这个解决方案确实起作用了。我唯一建议的更改是将其改为： window.location.hash = ui.tab.hash; - Rob

这对我来说是最好的解决方案。其他建议会导致页面在位置哈希更新时跳转到所选选项卡。在示例中提供的内容中，将“window.location.hash = ui.tab.hash;”替换为第二个选项。 - Michael Reed

Answer 8

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

- warden

Answer 9

我使用的jQuery UI 1.10.3的方法

$("#tabs").tabs({
   beforeActivate: function(event, ui) {
        var hash = ui.newTab.children("li a").attr("href");
        window.location.hash = hash;
   }
});

- QuiGonJin2

Answer 10

在查看其他问题和jQueryUI API文档后，我发现这对我有用。

$(document).ready(function() {
    $("#tabs").tabs({
        activate: function( event, ui ) {
            location.hash = ui.newTab.children(".ui-tabs-anchor").attr("href").substr(1);
        }
    });
});

- Sean