javascript - Materialise CSS 和 Ruby on Rails 中的选项卡

Question

我是 Ruby on Rails 的新手，我很难设置选项卡。选项卡已显示，但页面刷新时出现问题。

每次页面刷新时，标签不会停留在当前事件标签上，它会恢复到第一个标签。标签 ID 也不会显示在 URL 中。

我正在使用 Ruby on Rails 和 Materialise CSS。

谢谢!

HTML

<div class="col s12">
  <ul class="tabs" id="tabs">
    <li class="tab col s3"><a href="#tabs-1">Learning</a></li>
    <li class="tab col s3"><a href="#tabs-2">Setting Up</a></li>
    <li class="tab col s3"><a href="#tabs-3">Milestones</a></li>
    <li class="tab col s3"><a href="#tabs-4">Personal Survey</a></li>
  </ul>
</div>

<div id="tabs-1" class="col s12">
  <h5>Tab Content</h5>
</div>

<div id="tabs-2" class="col s12">
  <h5>Tab Content</h5>
</div>

<div id="tabs-3" class="col s12">
  <h5>Tab Content</h5>
</div>

<div id="tabs-4" class="col s12">
  <h5>Tab Content</h5>
</div>

Js

<script>
  $(document).ready(function(){
    $('ul.tabs').tabs('select_tab', 'tab_id');
  });
</script>

更新

我尝试将事件的标签页 ID 存储在本地存储中，但我不确定我是否做对了。 Chrome 显示我的本地存储中没有存储任何内容。

Im on Rails using Materialize CSS with JQuery Plugin. 

    $("#tabs").tabs({
      active: localStorage.getItem("currentIdx"),
      activate: function(event, ui) {
          localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
      }
    });

Answer 1

如果您不希望在重新加载页面时丢失所选标签信息，您将需要使用 cookies/session-storage 来保存最后一个事件标签，并在页面重新加载时再次激活保存的标签。