0

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

1 回答 1

2

这适用于您的标记：

$(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 文档建议的方式进行硬编码。它可以在过去的 2.3.x 时代使用。不过，这并不是第一次在引导程序中发现异常或“功能”。

于 2013-09-20T22:18:01.297 回答