javascript - リロード スニペットで Bootstrap の現在のタブを設定し、最後のタブをローカル ストレージに保存しない

Question

ページの読み込み時に現在のタブ (ページのリロード前に表示された最後のタブ) を設定しようとしています。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> 

(以下のコメントで言及されているバグのみ)

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

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

リンクをクリックした後、最新のタブを設定しません。

そして Pay アクション:

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