实现CSS和Rails中的选项卡

Question

我刚接触Rails，很难设置选项卡。显示选项卡，但当页面刷新时，我有一个问题。

每次页面刷新选项卡时，不要停留在当前活动选项卡上，它将恢复到第一个选项卡。此外，标签in不显示在URL中。

我正在使用Rails并实现CSS。

谢谢!

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

更新

我试图将活动Tabs存储在本地存储中，但我不确定是否正确。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

如果不希望在重新加载页面时丢失选定的选项卡信息，则需要使用cookie/会话存储保存最后一个活动选项卡，并在重新加载页时再次激活保存的选项卡。