使用jQuery UI选项卡更改location.hash
我一直在试图find一种方法来将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有关。 接受的答案和其他build议的答案略有修改做的工作。 谢谢大家。
在你的事件处理函数中， ui.tab是一个锚元素。 你可以像这样获取它的哈希值：
$("#tabs > ul").tabs(); $("#tabs > ul").bind("tabsshow", function(event, ui) { window.location.hash = ui.tab.hash; })
这对你有用吗？
$('#tabs').tabs({ select: function(event, ui) { window.location.hash = ui.tab.hash; } });
虽然上面的一些解决scheme可以工作，但是在某些情况下，它们会导致页面跳转，因为window.location.hash API旨在将您引导到页面的特定部分。
这里提出的这个整洁的解决scheme解决了这个问题
$("#tabs").bind("tabsshow", function(event, ui) { history.pushState(null, null, ui.tab.hash); });
这对我来说，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
我简单的解决scheme没有跳跃
$("#tabs").tabs({ activate: function (event, ui) { var scrollPos = $(window).scrollTop(); window.location.hash = ui.newPanel.selector; $(window).scrollTop(scrollPos); } });
这是你要去的吗？
$("#tabs > ul").tabs({ select: function(event, ui) { window.location = "#" + ui.tab; } });
$('#tabs').tabs({ select: function(event, ui){ window.location = ui.tab.href; } });
上面的许多答案不适用于当前版本的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); } });
我的方式为jQuery UI 1.10.3
$("#tabs").tabs({ beforeActivate: function(event, ui) { var hash = ui.newTab.children("li a").attr("href"); window.location.hash = hash; } });
这对我使用Jquery 1.8工作
$('#tabs').tabs({ activate: function(event, ui) { window.location.hash = ui.newPanel.attr('id'); } });
看过其他一些问题和jQueryUI API文档后，我发现这最终为我工作。
$(document).ready(function() { $("#tabs").tabs({ activate: function( event, ui ) { location.hash = ui.newTab.children(".ui-tabs-anchor").attr("href").substr(1); } }); });
我正在使用一个标签插件，你可以在github上find它： https ： //github.com/jquerytools/jquerytools.github.com
看起来像ui.tab本身不返回一个有效的string。 （而不是返回undefined，所以你会说它根本不会返回任何东西。）
尝试在ui.jquery.js的dev版本中查看是否有任何返回，也许你必须调用ui.tab的子项;-)
这段代码适合我：
$('#tabs').tabs({ select: function(event, ui) { window.location = $(ui.tab).attr('href'); } });
这段代码适用于我：
$("#tabs").tabs({ activate: function(event, ui) { window.location.hash=ui.newPanel.selector; } });
以下代码适用于我..
$("#tabs").tabs({ activate : function(event, ui) { window.location.hash = ui.newPanel[0].id; } });
这段代码适合我：
window.location.hash="";
