在重新加载代码段上设置 Bootstrap 当前选项卡，而不是在本地存储中存储最后一个选项卡

Set Bootstrap current tab on reload snippet not storing last tab in local storage

本文关键字：选项 存储 最后一个 新加载 加载 设置 代码 Bootstrap      更新时间：2023-09-26

我正在尝试在页面加载时设置当前选项卡（页面重新加载前查看的最后一个选项卡）。我已经在堆栈溢出上尝试了多种解决方案，但没有成功。

$(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

这适用于您的标记：

$(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 时代工作。但是，这不是第一次在引导程序中发现异常或"功能"。

相关文章：