jQuery UI选项卡，单击其他选项卡时更新url
jQuery UI选项卡，单击其他选项卡时更新url
提问于 2012-03-19 12:33:34
我正在使用jQuery UI：http://jqueryui.com/demos/tabs/的选项卡
当用户单击另一个选项卡时，如何更新浏览器的当前url，方法是向其添加锚链接: ex: url.html# tab -4，并同时推送浏览器的当前历史记录。
谢谢!
回答 9
Stack Overflow用户
回答已采纳
发布于 2012-03-19 12:44:21
这将得到您想要的结果(在1.9版中使用jQuery UI 1.8，稍后使用激活事件，有关代码示例，请参阅其他答案)。我在jQuery UI演示中使用了样例HTML；
$( "#tabs" ).tabs({
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
});Stack Overflow用户
发布于 2012-03-19 12:43:53
对于、jQuery、UI 1.10、和更高版本，show已被弃用于activate。而且，id不再是有效的jQuery。使用.attr('id')代替。最后，使用on('tabsactivate')而不是bind()。
$(function() {
$("#tabs").tabs({
activate: function(event, ui) {
window.location.hash = ui.newPanel.attr('id');
}
});
});创建后方法：
$("#myTabs").on( "tabsactivate", function(event, ui) {
window.location.hash = ui.panel.id;
});可观测结果：http://jsfiddle.net/RVHzV/show/light/
早期版本的JQuery
向选项卡调用中添加一个处理程序，以使用选项卡id更新位置哈希：
$("#myTabs").tabs({
// options ...
show: function(event, ui) {
window.location.hash = ui.panel.id;
}
});还可以在创建UI Tabs之后添加此内容：
$("#myTabs").bind( "tabsshow", function(event, ui) {
window.location.hash = ui.panel.id;
});Stack Overflow用户
发布于 2015-04-02 02:17:51
首先，我们需要更新选项卡更改上的散列(这是最新的jQueryUI)：
$('#tabs').tabs({
beforeActivate: function (event, ui) {
window.location.hash = ui.newPanel.selector;
}
}); 然后，我们需要更新散列更改的活动选项卡(即启用浏览器历史记录、后退/向前按钮和用户手动键入哈希)：
$(window).on('hashchange', function () {
if (!location.hash) {
$('#tabs').tabs('option', 'active', 0);
return;
}
$('#tabs > ul > li > a').each(function (index, a) {
if ($(a).attr('href') == location.hash) {
$('#tabs').tabs('option', 'active', index);
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9777518
复制
相似问题
jQuery UI选项卡，更新动态选项卡的url
使用jQuery UI选项卡时单击选项卡时停止旋转
如何在更新其他选项卡后刷新JQuery UI选项卡
单击按钮时发出JQuery UI选项卡
Jquery ui选项卡仅在单击选项卡时加载选项卡内容
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
