Question

大家好我在提交后我试图保持标签处于活动状态..我正在使用rails我该怎么做而且

我的观看代码

  <ul class="nav nav-tabs"  id="tabs">
                        <li class="active"><a href="#project" data-toggle="tab" title="Project">Project</a></li>
                        <li><a href="#Requirements" data-toggle="tab" title="Requirements"  onclick="clickme(this,1,1)">Requirements</a></li>
                        <li><a href="#Governance" data-toggle="tab"  title="Governance"  onclick="clickme(this,1,2)">Governance</a></li>
                    </ul>  
                    <div class="tab-content">

                        <div class="tab-pane active " id="project">
                           <%= render 'project'%>
                        </div>
                        <div class="tab-pane " id="Requirements">

                           <%= render 'form'  %>
                        </div>
                 </div>

我正在使用的脚本是

$(function() {
  var json, tabsState;
  $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var href, json, parentId, tabsState;

    tabsState = localStorage.getItem("tabs-state");
    json = JSON.parse(tabsState || "{}");
    parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
    href = $(e.target).attr('href');
    json[parentId] = href;

    return localStorage.setItem("tabs-state", JSON.stringify(json));
  });

  tabsState = localStorage.getItem("tabs-state");
  json = JSON.parse(tabsState || "{}");

  $.each(json, function(containerId, href) {
    return $("#" + containerId + " a[href=" + href + "]").tab('show');
  });

  $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
    var $this = $(this);
    if (!json[$this.attr("id")]) {
      return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
    }
  });
});

但它不起作用我正在使用bootstrap 3

Answer 1

我认为你可能会使事情过于复杂化。您可以在ERB视图中动态分配一个类（我假设这是），例如：

<li class="<%= 'active' if params[:action] == 'project' %>">

通过这种方式，您无需使用JavaScript来跟踪选项卡状态。

提交rails 4后保持当前选项卡处于活动状态

1 个答案: