Question

我希望能够为每个项目任务渲染一个标签。目前，唯一激活的标签是第一个（由于我在tabpanel div中包含我的索引== 0条件，我并不十分惊讶，但在我的修修补补中，我无法选择正确的标签）如何更改此选项以在选择时呈现正确的项目任务？有没有一种有效的方法来渲染这种内容而不使用AJAX？

 <div class='well col-xs-8 col-xs-offset-2'>
  <ul class="nav nav-pills" role="tablist" id="myTabs">
    <% @project.tasks.each_with_index do |task, index| %>
        <li role="presentation" class="tab-pane <%= 'active' if index == 0 %>">
          <a href="#<% task.title %>" aria-controls="<% task.title.downcase %>"
             role="tab" data-toggle="tab"><%= task.title %></a>
        </li>
    <% end %>
  </ul>

  <div class="tab-content">
    <% @project.tasks.each_with_index do |task, index| %>
      <div role="tabpanel" class="tab-pane fade in <%= 'active' if index == 0 %>" id="<%= task.title.downcase %>">
        <p><%= task.title %></p>
      </div>
    <% end %>
  </div>

  <%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" %>
  <%= javascript_include_tag "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" %>
</div>

In this case, the tab body should read 'Support'

Answer 1

我想建议使用带索引号的id，如下面的代码所示我将id与rails代码合并＆lt;％=＃{index}％＆gt;

下面是我根据上面代码创建的一些代码示例

<div class="panel with-nav-tabs panel-info">
    <div class="panel-heading">
        <ul class="nav nav-tabs">
            <% @project.tasks.each_with_index do |task, index| %>
                <% if index == 0 %>
                    <li class="active"><a href="#tab<%=#{index}%>" data-toggle="tab"><p><%= task.title %></p></a></li>                       
                <% else %>
                    <li><a href="#tab<%=#{index}%>" data-toggle="tab"><%= task.title %></a></li>
                <% end %>
            <% end %>                    
        </ul>
    </div>
    <div class="panel-body">
            <div class="tab-content">
                    <% @project.tasks.each_with_index do |task, index| %>
                        <% if index == 0 %>
                            <div class="tab-pane fade in active" id="tab<%=#{index}%>">
                                <p><%= task.title %></p>
                            </div>                            
                        <% else %>
                            <div class="tab-pane fade" id="tab<%=#{index}%>">
                                <p><%= task.title %></p>
                            </div>
                        <% end %>
                    <% end %>
            </div>
    </div>

使用Bootstrap选项卡在Rails中动态渲染数据库记录

1 个答案: