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

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

以及付款操作:

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

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

我在 tab('show') 上挣扎了很多 - 它似乎不起作用，甚至没有像 api 3 docs 那样硬编码。建议。它在过去的 2.3.x 时代就可以工作了。不过，这并不是第一次在 Bootstrap 中发现异常或“功能”。