Rails 4 - 動的にブートストラップタブを設定する

Question

私はRails 4アプリケーションでタブの内容フィールドを作成しようとしています。

私は最初のタブを表示したいので、問題があります（そして、それをクリックすると他のタブが表示されます）。

私は6つのタブプレースホルダーを持っています。属性は、trueまたはfalseとしてマークされているかどうかに応じて使用できます。 1つの属性がfalseの場合、タブの数は1つ少なくなります。

最初のタブに並んでいるコンテンツがfalseの属性に属する場合、最初にタブを表示する方法を理解することはできません（最初にクリックする必要はありません）。

例えば、タブの第一は、以下である：

<div class="dp-tab-1"> 
            <ul class="dp-tab-list row" id="myTab"> 
             <% if @project.package.has_background_ip == true %> 
              <li class="col-md-2 col-xs-6 active" > 
               <a href="#tab-content-first"> 
                <span class="glyph-item" data-icon="&#xe043;"></span> 
                <span>BACKGROUND INTELLECTUAL PROPERTY</span> 
               </a> 
              </li> 
             <% end %>  
             <li class="col-md-2 col-xs-6"> 
              <a href="#tab-content-second"> 
               <div class="glyph-item" data-icon="&#xe05c;"></div> 
               <span>DATA</span> 
              </a> 
             </li> 

これら二つのタブの内容は次のとおり

<div class="dp-tab-content tab-content"> 
              <div class="tab-pane row fade in active" id="tab-content-first"> 
               <% if @project.package.has_background_ip == true %> 
                <div class="col-md-6 text-center"> 
                 <%= image_tag(@project.package.background_ip.bip_image, :class=>"wow fadeInLeft img-responsive", :alt=>"123") %> 

                </div> 
                <div class="col-md-6"> 
                 <div class="tab-inner"> 
                  <h4>EXISTING INTELLECTUAL PROPERTY</h4> 
                  <p class='medium-text'> 
                   <%= render 'projects/bipparticulars' %> 
                  </p> 
                  <br/> 

                  <a class='btn btn-danger btn-line'>CHECK THESE IP TERMS</a> 

                 </div> 
                </div> 
               <% end %>  
              </div> 


             <div class="tab-pane row fade" id="tab-content-second"> 
              <div class="col-md-6"> 
               <div class="tab-inner"> 
                <h4>DATA</h4> 
                <p class='medium-text'> 
                 <%= render 'projects/dataparticulars' %> 
                </p> 
                <br/> 
                <% if @project.package.datum.survey_link == true %> 
                 <a class='btn btn-danger btn-line'>SURVEY</a> 
                <% end %> 

                <% if @project.package.datum.confidential == true %> 
                 <a class='btn btn-danger btn-line'>PROPOSED NDA</a> 
                <% end %>  
               </div> 
              </div> 
              <div class="col-md-6"> 
               <%= image_tag(@project.package.background_ip.bip_image, :class=>"wow fadeInUp img-responsive", :alt=>"123") %> 
              </div> 
             </div> 

最初のタブがあります

<% if @project.package.has_background_ip == true %> 

その場合属性がtrueの場合、タブが表示され、すべて正常に動作します。

この属性が真でない場合、タブは表示されず、他のものは正常に動作します。ただし、2番目のタブはコンテンツを自動的に表示しません - 最初にタブをクリックしてコンテンツを表示する必要があります。

最初の真のタブの内容を表示したい。

どうすれば実現できますか？

Answer 1

あなたはコンテンツを表示するために自動的に選択される第2のタブのactiveクラスを設定する必要があります。

<div class="dp-tab-content tab-content"> 
              <div class="tab-pane row fade in <%= project.package.has_background_ip == true ? 'active' : '' %>" id="tab-content-first"> 
               <% if @project.package.has_background_ip == true %> 
                <div class="col-md-6 text-center"> 
                 <%= image_tag(@project.package.background_ip.bip_image, :class=>"wow fadeInLeft img-responsive", :alt=>"123") %> 

                </div> 
                <div class="col-md-6"> 
                 <div class="tab-inner"> 
                  <h4>EXISTING INTELLECTUAL PROPERTY</h4> 
                  <p class='medium-text'> 
                   <%= render 'projects/bipparticulars' %> 
                  </p> 
                  <br/> 

                  <a class='btn btn-danger btn-line'>CHECK THESE IP TERMS</a> 

                 </div> 
                </div> 
               <% end %>  
              </div> 


             <div class="tab-pane row fade <%= project.package.has_background_ip == false ? 'active' : '' %>" id="tab-content-second"> 
              <div class="col-md-6"> 
               <div class="tab-inner"> 
                <h4>DATA</h4> 
                <p class='medium-text'> 
                 <%= render 'projects/dataparticulars' %> 
                </p> 
                <br/> 
                <% if @project.package.datum.survey_link == true %> 
                 <a class='btn btn-danger btn-line'>SURVEY</a> 
                <% end %> 

                <% if @project.package.datum.confidential == true %> 
                 <a class='btn btn-danger btn-line'>PROPOSED NDA</a> 
                <% end %>  
               </div> 
              </div> 
              <div class="col-md-6"> 
               <%= image_tag(@project.package.background_ip.bip_image, :class=>"wow fadeInUp img-responsive", :alt=>"123") %> 
              </div> 
             </div> 

うまくいけば！それが役立ちます。