Jquery 使Twitter引导标签持久化的最佳方法

让这些标签持久化的最佳方法是什么

---

要添加一些上下文，这是针对应用程序的。我正在将一个数组[tab1，tab2]传递给我的视图，呈现这两个选项卡，并使用引导选项卡插件切换它们的可见性。

您可以使用

window.location.hash

加载URL片段（这是

#

之后的URL部分），并特别将该选项卡设置为可见：

if (window.location.hash) {
    $(window.location.hash).tab('show')
}

---

此代码根据#散列选择正确的选项卡，并在单击选项卡时添加正确的#散列。（这使用jQuery）

在咖啡脚本中：

$(document).ready ->
    if location.hash != ''
         $('a[href="'+location.hash+'"]').tab('show')

    $('a[data-toggle="tab"]').on 'shown', (e) ->
        location.hash = $(e.target).attr('href').substr(1)

或在JavaScript中：

$(document).ready(function() {
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
    return $('a[data-toggle="tab"]').on('shown', function(e) {
      return location.hash = $(e.target).attr('href').substr(1);
    });
});

---

这里有另一个解决问题的方法

首先在click事件中添加一行，以在地址栏中显示哈希：

$('#myTab').on('click', 'a', function (e) {
  e.preventDefault();

  // Add this line
  window.location.hash = $(this).attr('href');

  $(this).tab('show');
})

然后，通过将此部分添加到document ready调用中，确保右选项卡已激活

onload

if(window.location.hash){
   $('#myTab').find('a[href="'+window.location.hash+'"]').tab('show');
}

总之，你可以这样写：

// Cache the ID
var navbox = $('#myTab');

// Activate tab on click
navbox.on('click', 'a', function (e) {
  var $this = $(this);

  // Prevent the ***default*** behavior
  e.preventDefault();

  // Set the hash to the address bar
  window.location.hash = $this.attr('href');

  // Activate the clicked tab
  $this.tab('show');
})

// If we have a hash in the address bar
if(window.location.hash){

  // Show right tab on load (read hash from address bar)
  navbox.find('a[href="'+window.location.hash+'"]').tab('show');
}

---

我想改进这里的最佳答案

积分会增加，但如果您想避免在更改选项卡时跳转页面，请使用以下改进代码：

$(document).ready(function() {

    // Show active tab on reload
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');

    // Remember the hash in the URL without jumping
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
       if(history.pushState) {
            history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
       } else {
            location.hash = '#'+$(e.target).attr('href').substr(1);
       }
    });
});

---

如果您不希望选项卡单击添加到历史记录中，但也不希望页面上下跳转，请使用另一个修改版本：

$(document).ready(function () {

  if (location.hash !== '') {
    $('a[href="' + location.hash + '"]').tab('show');
  }

  $("a[data-toggle='tab']").on("shown.bs.tab", function (e) {
    var hash = $(e.target).attr("href");
    if (hash.substr(0,1) == "#") {
      var position = $(window).scrollTop();
      location.replace("#" + hash.substr(1));
      $(window).scrollTop(position);
    }
  });

});

---

加载DOM后执行以下代码：

$('a[data-toggle=tab]').on('click', function () {
    history.pushState(null, null, $(this).attr('href'));
});


if (window.location.hash) {
    $('a[data-toggle=tab][href="' + window.location.hash + '"]').tab('show');
}

---

但是，这会导致较差的UI体验，因为当前活动的选项卡将首先显示，然后将从location.hash切换到选项卡。

我想改进这里的两个最佳答案：）

功劳归谁

因为代码中使用了历史API，所以不能使用onchangehash（）。这段代码添加了back按钮（）的功能

---

针对Bootstrap4进行了测试，这是一个没有历史推送的极简（两行）代码，可以在任何带有导航标签的页面上运行

<script type="text/javascript">
    $(document).ready(function(){

        // Store the currently selected tab in the hash value
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { location.replace($(e.target).attr("href")); });

        // Switch to the currently selected tab when loading the page
        $('.nav-tabs a[href="' + window.location.hash + '"]').tab('show');
    });
</script>

$（文档）.ready（函数（）{
//将当前选定的选项卡存储在哈希值中
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，function（e）{location.replace（$（e.target.attr（“href”）；}）；
//加载页面时切换到当前选定的选项卡
$（'.nav tabs a[href=“'+window.location.hash+''“]”）选项卡（'show'）；
});

是否使用任何服务器端语言，如php？使用rails和twitter引导程序rails？您不能在页面刷新期间使用URL变量，并使用rails将其设为默认值吗？哈希不会发送到服务器，因此，我不确定我将如何单独使用它。它不会被发送到服务器，因为它没有必要这样做-上面的例子是javascript。例如，如果您有一个

a

元素将浏览器发送到

yoursite.com/about#company

，则将显示

#company

选项卡。刷新时，将检查URL中是否有片段，如果有片段，则默认情况下将显示带有匹配的

id

的选项卡。我编辑了我的问题以删除“持久刷新”，因为它具有误导性。我真正的问题是我有分页链接，当我在tab2中更改页面时，它会返回到tab1。非常感谢这个答案。我对它做了一些调整，以避免两个问题：1）切换选项卡添加到导航历史记录中，2）由于片段导航，后导航上的滚动位置丢失。这在引导3中不起作用。使用

show.bs.tab

而不是

show

作为事件名称。回答得很好，但是如果您想避免在开始单击选项卡时“跳转”页面，请使用此代码而不是“return”

$（'a[data toggle=“tab”]”）。on（'show.bs.tab'，function（e）{if（history.pushState）history.pushState（null，null，#'+$（e.target）.attr（'href'）.substr（1））；else location.hash='#'+$（e.target.attr（'href'）.substr（1）；}）我对Bootstrap3进行了更改，并将其添加到我的Rails应用程序中，效果良好。在Rails、gems和StackOverflow之间，我觉得我几乎再也写不出任何实际的代码了。有没有办法使用后退和前进浏览器按钮来实现这一点？你测试过吗？它应该根据url中更改的哈希值更改历史记录。是的…脚本会更改与所选选项卡相关的浏览器URL，但实际上不会更改选项卡本身。当按下浏览器后退箭头时，它仍保持为打开状态。确定您需要收听
hashchange
事件。快速和肮脏：|引导3复制、粘贴和放松的最佳答案。谢谢@Sucrenoir答案是一个很好的答案，我用它来解决我自己的问题，这个答案取代了它，因为在Sucrenoir的答案上，页面不会在第一次更改选项卡时更新
。只有第一个。然而，@dootzky编写的这段代码在第一次和每次单击选项卡时都会更新引用。Cheers我收到一个错误
TypeError:$（…）。对于此行
history.pushState（null，null，#'+$（e.target）.attr（'href'）.substr（1）），attr（…）未定义在导航选项卡时，然后按“浏览器后退”按钮，它不会加载以前选择的选项卡。我对以前的答案有疑问，无法在显示选项卡时将哈希附加到URL中。。。这个答案完全是开箱即用的，因为它确实有效！我只是复制粘贴了它，就这样！（Bootstrap4）
<script type="text/javascript">
    $(document).ready(function(){

        // Store the currently selected tab in the hash value
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { location.replace($(e.target).attr("href")); });

        // Switch to the currently selected tab when loading the page
        $('.nav-tabs a[href="' + window.location.hash + '"]').tab('show');
    });
</script>