Rails 4 - Bootstrap-Registerkarten dynamisch auffüllen

Question

Ich versuche, in meiner Rails 4-App eine Reihe von Tab-Inhaltsfeldern zu erstellen.

Ich habe ein Problem, weil ich die erste Registerkarte angezeigt werden soll (und dann die anderen angezeigt werden, wie Sie durch sie klicken).

Ich habe 6 Tab-Platzhalter, die verwendet werden können, abhängig davon, ob ein Attribut als wahr oder falsch markiert ist. Wenn ein Attribut falsch ist, gibt es eine Registerkarte weniger.

Wenn der Inhalt, der in der ersten Registerkarte aufgereiht ist, zu dem Attribut gehört, das falsch ist, kann ich nicht herausfinden, wie die erste Registerkarte angezeigt wird (ohne zuerst darauf klicken zu müssen).

Beispielsweise sind die ersten, tabs unten:

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

Der Inhalt für diese beiden Laschen ist:

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

Die erste Lasche hat:

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

Wenn das Attribut ist wahr, dann wird die Registerkarte angezeigt und alles funktioniert gut.

Wenn dieses Attribut nicht wahr ist, wird die Registerkarte nicht angezeigt und alles andere funktioniert einwandfrei, AUSSER dass die zweite Registerkarte ihren Inhalt nicht automatisch anzeigt - ich muss zuerst auf die Registerkarte klicken, um den Inhalt anzuzeigen.

Ich möchte die erste echte Registerkarte seinen Inhalt auf dem Display haben.

Wie kann ich das erreichen?

Answer 1

Sie sollten active Klasse für den zweiten Registerkarte automatisch ausgewählt, um zu zeigen, Inhalt:

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

Hoffentlich! Es wird helfen.