47

我一直在尝试找到一种方法将 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 有关。接受的答案和稍作修改的其他建议答案都可以工作。谢谢大家。

4

18 回答 18

49

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

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

这对你有用吗？

于 2009-02-20T17:16:27.787 回答
25 
$('#tabs').tabs({
    select: function(event, ui) {
        window.location.hash = ui.tab.hash;
    }
});
于 2010-10-19T13:46:45.180 回答
14

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

这里提出的这个巧妙的解决方案解决了这个问题

  $("#tabs").bind("tabsshow", function(event, ui) { 
    history.pushState(null, null, ui.tab.hash);
  });
于 2012-10-05T17:44:18.400 回答
8

这对我有用，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

于 2013-02-28T12:04:49.703 回答
7

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

    $("#tabs").tabs({
        activate: function (event, ui) {
            var scrollPos = $(window).scrollTop();
            window.location.hash = ui.newPanel.selector;
            $(window).scrollTop(scrollPos);
        }
    });
于 2014-02-17T15:42:03.207 回答
4

这会是你想要的吗？

$("#tabs > ul").tabs({ 
   select: function(event, ui) 
   { 
      window.location = "#" + ui.tab;
   }
});
于 2009-02-20T16:52:11.590 回答
4

上述许多答案不适用于当前版本的 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);
    }
});
于 2013-06-19T12:35:45.203 回答
3 
$('#tabs').tabs({
    select: function(event, ui){
      window.location = ui.tab.href;
    }
});
于 2009-05-09T14:43:41.467 回答
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;
   }
});
于 2013-09-23T11:39:52.800 回答
1

我正在使用一个选项卡插件，您可以在 github 上找到它：https ://github.com/jquerytools/jquerytools.github.com

于 2010-09-27T09:18:36.847 回答
1

这对我使用 Jquery 1.8 有效

$('#tabs').tabs({
    activate: function(event, ui) {
       window.location.hash = ui.newPanel.attr('id');
    }
});
于 2013-10-31T20:46:10.223 回答
1

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

$(document).ready(function() {
    $("#tabs").tabs({
        activate: function( event, ui ) {
            location.hash = ui.newTab.children(".ui-tabs-anchor").attr("href").substr(1);
        }
    });
});
于 2015-01-12T19:54:57.293 回答
0

似乎 ui.tab 本身没有返回有效的字符串。（相反它返回未定义，所以你会说它根本不返回任何东西。）

尝试在 ui.jquery.js 的开发版本中查看是否有任何返回，也许你必须调用 ui.tab 的孩子;-)

于 2009-05-20T15:07:35.323 回答
0

这段代码对我来说没问题：

$('#tabs').tabs({
    select: function(event, ui) { 
        window.location = $(ui.tab).attr('href');
    }
});
于 2014-02-05T12:43:03.227 回答
0

这段代码对我有用：

$("#tabs").tabs({
    activate: function(event, ui) { 
       window.location.hash=ui.newPanel.selector; 
    }
});
于 2016-03-23T09:18:41.783 回答
0

以下代码对我有用..

$("#tabs").tabs({
   activate : function(event, ui) {
     window.location.hash = ui.newPanel[0].id;
  }
});
于 2017-02-07T04:45:17.413 回答
0

我的工作解决方案。

jQuery v3.5.1、jQuery UI v1.12.1

$(".detail-groups").tabs({ activate: function(event, ui) {
                            window.location.hash = ui.newPanel[0].id;
                         }
                    });
于 2020-06-03T12:17:49.687 回答
-1

这段代码对我有用：

window.location.hash="";
于 2014-07-11T11:14:24.867 回答