使用jquery ui选项卡更改location.hash

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

我试过：

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

这会导致在更改选项卡时将哈希更改为#未定义

我也试过：

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

但这似乎根本没有被触发

任何帮助都将不胜感激。谢谢

---

编辑：看起来我最初的问题的一部分与js在其他地方的干扰有关。被接受的答案和另一个稍微修改过的建议答案都有效。谢谢大家。

这就是你们想要的吗

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

---

在事件处理程序函数中，

ui.tab

是一个锚元素。您可以如下方式检索其哈希值：

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

---

这对您有用吗？

ui.tab本身似乎没有返回有效字符串。（相反，它返回的是未定义的，所以您可以说它根本不返回任何内容。）

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

---

尝试在ui.jquery.js的开发版本中查找是否有任何返回，可能需要调用ui.tab的子级；-）

我正在使用一个选项卡插件，您可以在github上找到它：

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

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

  $("#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; 
    }
});

---

另请参见：

上述许多答案不适用于当前版本的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);
    }
});

---

jQueryUI1.10.3的我的方式

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

---

这对我使用jQuery1.8是有效的

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

---

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

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

---

我不跳跃的简单解决方案：

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

---

这段代码对我很有用：

window.location.hash="";

---

在浏览了其他一些问题和jQueryUI API文档之后，我发现这对我来说是可行的

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

---

此代码适用于我：

$("#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;
  }
});

我的工作方案

jQuery v3.5.1，jQuery UI v1.12.1

$(".detail-groups").tabs({ activate: function(event, ui) {
                            window.location.hash = ui.newPanel[0].id;
                         }
                    });

---

你想在点击链接的选项卡中打开一个链接吗？不，我打开的链接是当前页面本身的一部分，没有ajax/等等。这是一个非常棒的技术演示：是否有一种解决方法可以防止页面在点击选项卡时跳到页面中的散列锚？我尝试了这个方法，但没有任何运气。我甚至尝试在window.location设置之前添加一个警报，但在更改选项卡时它不会出现。我能激活它的唯一方法是绑定tabsshow，但最终会出现一个未定义的ui.tab。当我尝试使用演示代码时，这个稍微修改的解决方案确实有效。我建议的唯一更改是：window.location.hash=ui.tab.hash；这对我来说是最好的解决办法。其他建议导致页面在更新位置哈希时跳转到所选的选项卡。附议“window.location.hash=ui.tab.hash；”以代替示例中提供的内容，tho。不幸的是，没有，我在页面加载或选项卡更改时收到许多ui.tab未定义的错误。我一直在尝试文档页面上显示的演示，该演示与FF 3和IE 7配合良好。您是否手动触发事件？我按照您的建议尝试了演示页面，您的解决方案最终成功了，感谢您的解决方案，我必须找出代码中还有哪些内容阻止了它的工作。谢谢如果您在Firefox上进行测试，请安装Firebug扩展并放置一个console.trace（）来跟踪问题的来源。@Fabdrol您需要ui.tab.index；）这对我来说很好，但是，我正在使用ajax加载我的选项卡，所以哈希值总是“ui-tabs-1”、“ui-tabs-2”等等。。。这意味着，当我重新排序、添加或删除选项卡时，书签会断开。你知道一种方法吗？我可以为标签使用自定义哈希名称？完美的解决方案，唯一对我有效的方法：）这可能应该被标记为正确答案。

$(".detail-groups").tabs({ activate: function(event, ui) {
                            window.location.hash = ui.newPanel[0].id;
                         }
                    });