使用引导标签

我希望能够呈现一个标签，我的每个项目任务动态地呈现在Rails的数据库记录。目前，活动的唯一标签是第一个（这我不是非常吃惊，因为我包括我的索引上的一个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'

来源

2017-06-21 colincr

什么是不工作？它看起来像你的代码的一般形式是正确的。 –

@MichaelChaney新增的图像，以便更好地说明这个问题;我的<％='active'if index == 0％>条件确保第一个标签总是呈现。如果我删除条件，则每个任务的标题都将显示在视图中。我不确定的是如何确保选定的选项卡是唯一呈现数据的选项卡。 – colincr

我想使用具有索引号ID建议如图代码下面我合并的ID与轨道代码<（％）=＃{指数}％>

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

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

来源

2017-06-21 17:15:01 widjajayd

这个工作，但不是插我改变<%=#{index}%>为<％= index.to_s％> - 谢谢您的帮助！ – colincr

使用引导标签

回答

相关问题