使用引導標籤

我希望能夠呈現一個標籤，我的每個項目任務動態地呈現在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

使用引導標籤

回答

相關問題