Javascript 在重新加载代码段时设置引导当前选项卡未在本地存储中存储最后一个选项卡

我试图在页面加载时设置当前选项卡（页面重新加载之前查看的最后一个选项卡）。我在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> 

单击链接后不设置最新选项卡

薪酬行动：

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

---

这适用于您的标记：

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

---

我在

tab（'show'）

方面做了很多努力-它似乎不起作用，甚至没有按照建议的方式硬编码。它可以追溯到2.3.x时代。不过，这不是第一次在引导中发现异常或“功能”。

运行此代码时会发生什么？它只是像正常一样进行选项卡，在重新加载时不会保存选项卡。lastTab localStorage变量保持未定义状态。未定义该变量是因为选择器不准确。很明显，使用redirect_to不会触发任何DOM事件，那么DOM就绪脚本自然不会执行。因此，您需要另一种方法，就像您在delete中使用的方法一样，它似乎是有效的。如果您在支付后重新加载，它也会显示右侧选项卡，这是另一个证明。但这些都与我的答案无关。是的，我意识到这与你的答案无关。我问你是因为你似乎是这份工作的合适人选。我已经解决了这个问题。非常感谢您抽出时间。它正在工作，谢谢！不过有一个小bug（）。当我单击“支付”或“删除”按钮时，我需要它再次重新加载到选项卡上。我已经用我尝试过的方法更新了我的帖子。这不是一个“bug”

Pay

显然是一个链接，它做了一些事情，然后重新加载页面-您修改的代码，

setLatestTab（）内部单击在页面重新加载后永远不会执行。只需像我演示的那样将代码保存在一个
$（function（）{
中，每次重新加载页面时都会执行它。这是一个脚本，在对文件进行更改时重新加载页面。它的功能非常类似于“实时视图”。我忘了在开发中只包含它。我更新了我的帖子，以包含付费操作。
$(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();
  }
}