在重新加载片段上设置引导当前选项卡而不将最后一个选项卡存储在本地存储中答案

【问题标题】：Set Bootstrap current tab on reload snippet not storing last tab in local storage在重新加载片段上设置引导当前选项卡而不将最后一个选项卡存储在本地存储中
【发布时间】：2013-09-23 06:34:13
【问题描述】：

我正在尝试在页面加载时设置当前标签（页面重新加载之前查看的最后一个标签）。我在stackoverflow上尝试了多种解决方案，但均未成功。

$(function() { 
  //for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
  $('a[data-toggle="tab"]').on('shown', function (e) {
    //save the latest tab; use cookies if you like 'em better:
    localStorage.setItem('lastTab', $(e.target).attr('id'));
  });

  //go to the latest tab, if it exists:
  var lastTab = localStorage.getItem('lastTab');
  if (lastTab) {
      $('#'+lastTab).tab('show');
  }
}


);

这是我的标签页 HTML

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li><a href="#all" data-toggle="tab">All</a></li>
    <li><a href="#this_month" data-toggle="tab">This Month</a></li>
    <li><a href="#next_month" data-toggle="tab">Next Month</a></li>
    <li><a href="#last_month" data-toggle="tab">Last Month</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane" id="all">
      <%= render partial: 'layouts/format_bills', locals: { bill_filter: @all_bills_by_months } %>
    </div>

    <div class="tab-pane" id="this_month">
      <%= render partial: 'layouts/format_bills', locals: { bill_filter: @bills_for_this_month } %>
    </div>

    <div class="tab-pane" id="next_month">
      <%= render partial: 'layouts/format_bills', locals: { bill_filter: @bills_for_next_month } %>
    </div>

    <div class="tab-pane" id="last_month">
      <%= render partial: 'layouts/format_bills', locals: { bill_filter: @bills_for_last_month } %>
    </div>
  </div>
</div>

（仅针对以下cmets中提到的bug）

  function setLatestTab() {
    var lastTab = localStorage.getItem('lastTab');
    if (lastTab) {
      $('a[href='+lastTab+']').click();
    } 
  }

  setLatestTab();
  $('.table #payBills').on('click', function(e) {
    setLatestTab();
  });

点击链接后不设置最新标签。

以及支付操作：

  def pay 
      @bill.update_attributes(paid: true)
      redirect_to bills_path
  end

【问题讨论】：

运行此代码时会发生什么？
它只是像正常的标签，并且不会在重新加载时保存标签。 lastTab localStorage 变量也未定义。
未定义，因为您的选择器不准确
"Sometimes inexperienced developers think of redirect_to as a sort of goto command, moving execution from one place to another in your Rails code." 很明显没有使用redirect_to触发DOM事件，那么dom准备好的脚本自然不会被执行。因此，您需要另一种方法，例如您在删除中使用的方法，这似乎有效。如果您在付款后重新加载，它还会显示正确的选项卡，这是另一个证明。但这与我的回答完全无关。
是的，我意识到这与您的回答无关。我问你是因为你似乎是这份工作的人选。我已经解决了这个问题。非常感谢您的宝贵时间。

标签： javascript jquery html ruby-on-rails twitter-bootstrap

【解决方案1】：

这适用于您的标记：

$(function() { 
  $('a[data-toggle="tab"]').on('click', function (e) {
    var tab = $(this).attr('href');
    localStorage.setItem('lastTab', tab);
  });

  //go to the latest tab, if it exists:
  var lastTab = localStorage.getItem('lastTab');
  if (lastTab) {
    $('a[href='+lastTab+']').click();
  }
}

我对@987654324@ 做了很多努力——它似乎不起作用，甚至没有像api 3 docs 建议的那样硬编码。它可以在过去的 2.3.x 时代使用。不过，这并不是第一次在引导程序中发现异常或“功能”。

【讨论】：

它工作正常，谢谢！一个小错误（billpay.herokuapp.com）。当我单击“支付”或“删除”按钮时，我需要它再次重新加载到选项卡上。我已经用我尝试过的方法更新了我的帖子。
这不是一个“错误”。 Pay 显然是一个链接，它执行某些操作然后重新加载页面 - 您的更改代码，setLatestTab(); 内部点击在页面重新加载后从不执行。只需将我演示的代码保存在 $(function() { 中，每次重新加载页面时都会执行该代码。
这是一个在文件发生更改时重新加载页面的脚本。几乎像“实时视图”这样的功能。我忘了只将其包含在开发中。我更新了我的帖子以包含支付操作。