jQuery UI 选项卡，单击不同选项卡时更新 url答案

【问题标题】：jQuery UI tabs, update url when clicking on a different tabjQuery UI 选项卡，单击不同选项卡时更新 url
【发布时间】：2012-03-19 20:33:34
【问题描述】：

我正在使用 jQuery UI 的选项卡：http://jqueryui.com/demos/tabs/

当用户点击不同的标签时，如何通过添加锚链接来更新 浏览器 的当前 URL： ex: url.html#tab-4 同时推送浏览器当前历史记录。

谢谢！

【问题讨论】：

你能提供更多信息吗？不清楚你在问什么......
好的，我会试试的：p
好的，如果这样可以告诉我;)

标签： jquery jquery-ui tabs

【解决方案1】：

对于 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/

可观察结果：http://jsfiddle.net/RVHzV/show/light/

JQuery 的早期版本

将处理程序添加到您的选项卡调用以使用选项卡 ID 更新位置哈希：

$("#myTabs").tabs({
   // options ...
   show: function(event, ui) {
        window.location.hash = ui.panel.id;
   }
});

您也可以在创建 UI 选项卡后添加它：

$("#myTabs").bind( "tabsshow", function(event, ui) {
        window.location.hash = ui.panel.id;
});

代码演示：http://jsfiddle.net/jtbowden/ZsUBz/1/

可观察结果：http://fiddle.jshell.net/jtbowden/ZsUBz/1/show/light/

【讨论】：

它正在工作，但浏览器向下滚动以转到锚点，其他解决方案是完美的，但谢谢 :)
您可能正在使用更新版本的 jQuery UI。 show 方法在 jQuery UI 1.9 中被弃用，并在 1.10 中被移除。现在称为activate。 jQuery 也不再支持 id。您需要使用.attr('id')。上面的修改。
感谢更新代码。我在标题下方使用此选项卡。无论如何，在显示 url 时是否可以防止跳转到 href？
@NeilLittle 嗯。我认为修复很简单，但看起来这是一种已知行为。试试这个问题：stackoverflow.com/questions/243794
不滚动浏览器窗口网址栏更新hash的解决方案在这里：stackoverflow.com/questions/8624531/#25577016 Demo在这里：jsfiddle.net/xsx5u5g2/show/#CatsHTH。

【解决方案2】：

这应该得到你想要的（使用jQuery UI 1.8，在1.9 版及更高版本中使用activate event，代码示例请参见其他答案）。我在 jQuery UI 演示中使用了示例 HTML；

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

【讨论】：

@KeyCrumbs。看起来您正在查看不再支持选择事件的最新版本的文档。答案已经超过一年了。请查看支持该事件的版本 1.8.10 文档。请通过发布您的代码为什么它不起作用来支持您的评论...... OP 已经通过说它对他有用来标记答案是正确的......在否决一年前的答案之前进行更多调查。这是我为之准备的一个示例你受益experiementswithweb.com/testjs/jq.html
@DG3 不再有效的旧答案应该被否决，这是使网站保持最新的一种方式。
@TobyAllen 或更好，更新了新版本的信息！

【解决方案3】：

首先，我们需要在选项卡更改时更新哈希（这是针对最新的 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);
    }
  });
});

【讨论】：

这个和code.jquery.com/ui/1.12.1/jquery-ui.js配合得很好

【解决方案4】：

$( "#tabs" ).tabs({            
        activate: function(event, ui) {
            //Key => random string
            //url => URL you want to set
            window.history.pushState({key:'url'},'','url');
        }
    });

【讨论】：

【解决方案5】：

我必须使用“创建”而不是“激活”来让我的初始标签显示在 URL 中：

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

此解决方案似乎适用于更改 URL，但是当我返回 URL 时，它不会为我切换选项卡。当该 URL 被点击时，我是否需要做一些特别的事情来让它切换标签？

【讨论】：

我记得在某处看到，为了在哈希标记通过返回历史而更改时更新页面，您需要一个 JavaScript 每隔这么多秒检查一次 url 的哈希值并执行任何操作需要基于该哈希在页面上执行（如果您仅将片段用于一组选项卡，则可以简单地激活相应的选项卡）。

【解决方案6】：

以 Jeff B 的上述工作为基础......这适用于 jQuery 1.11.1。

$("#tabs").tabs(); //initialize tabs
$(function() {
    $("#tabs").tabs({
        activate: function(event, ui) {
            var scrollTop = $(window).scrollTop(); // save current scroll position
            window.location.hash = ui.newPanel.attr('id'); // add hash to url
            $(window).scrollTop(scrollTop); // keep scroll at current position
    }
});
});

【讨论】：

照顾滚动位置的好解决方案

【解决方案7】：

这里其他答案的组合对我有用。

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

【讨论】：

【解决方案8】：

我在我的 jQuery 响应式选项卡中使用了这种方法，以使用活动选项卡对 url 进行哈希处理。

$(function() {
       $('#tabs, #subtabs').responsiveTabs({
            activate: function(event, ui) {
            window.location.hash = $("ul li.r-tabs-state-active a").attr("href");
        },
        startCollapsed: 'accordion'
       });
});

【讨论】：

【解决方案9】：

虽然这是旧的，但许多答案根本不起作用。或者使用不同的 HTML 结构。

所以...如果有人感兴趣的话，2021 年的更新。

<div class="tabs">
    <ul>
    <li><a href="#personalInformation-content">Personal Information</a></li>
    <li><a href="#profileImage-content">Profile Image</a></li>
    <li><a href="#username-content">Username</a></li>
    <li><a href="#password-content">Password</a></li>
    </ul>


    <div class="tab-content" id="personalInformation-content">
    // Some Tab content 
    </div>

    <div class="tab-content" id="profileImage-content">
    // Some Tab content 
    </div>

    <div class="tab-content" id="username-content">
    // Some Tab content 
    </div>

    <div class="tab-content" id="username-content">
    // Some Tab content 
    </div>
</div>

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

$( ".tabs" ).on( "tabsactivate", function( event, ui ) {
    window.location.hash = ui.newPanel.attr('id');
    });
</script>

【讨论】：