Rails 4 - 如何显示标签内容而无需点击标签标签

Question

我想弄清楚如何在我的Rails 4应用中显示标签内容。

我最近问了这个问题 - 其目的是想知道如何设置活动选项卡，根据属性是否设置为true或false。通过整合该帖子中概述的解决方案（下面的链接），我创建了一个新问题。

Rails 4 - how to designate active tab to first instance of a true condition

现在 - 当我尝试呈现页面时，如果第一个选项卡的属性是不正确的，下一个标签上有活动显示，但该选项卡的内容，一旦我点击只透露在标签标签上。

这是我的标签：

<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' if firstActiveTab == 1 %>" > 
              <!-- <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 %> 

             <% if @project.package.has_data == true %>  
              <li class="col-md-2 col-xs-6 <%= 'active' if firstActiveTab == 2 %>" > 
              <!-- <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> 
             <% end %> 

             <% if @project.package.has_funding == true %> 
              <li class="col-md-2 col-xs-6 <%= 'active' if firstActiveTab == 3 %>" > 
              <!-- <li class="col-md-2 col-xs-6"> --> 
               <a href="#tab-content-third"> 
                <div class="glyph-item" data-icon="&#xe04c;"></div> 
                <span>FUNDING</span> 
               </a> 
              </li> 
             <% end %> 

             <% if @project.package.has_materials == true %> 
              <li class="col-md-2 col-xs-6 <%= 'active' if firstActiveTab == 4 %>" > 
              <!-- <li class="col-md-2 col-xs-6"> --> 
               <a href="#tab-content-fourth"> 
                <div class="glyph-item" data-icon="&#xe04c;"></div> 
                <span>MATERIALS</span> 
               </a> 
              </li> 
             <% end %> 

这些相应的标签内容：

<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 PROPERTY</h4> 
                  <p class='medium-text'> 
                   <%= render 'projects/bipparticulars' %> 
                  </p> 
                  <br/> 

                  <a class='btn btn-danger btn-line'>CHECK THESE 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 %> 


               </div> 
              </div> 

             </div> 


             <div class="tab-pane row fade" id="tab-content-third"> 
              <div class="col-md-6"> 
               <div style="position: relative"> 


                <!-- <img src="images/mockup2a.png" class='wow slideInLeft img-responsive' style='position: absolute;left: 0px; bottom: 0; max-width: 80%;' data-wow-delay='0.1s' alt=""/> --> 
                <!-- <img src="images/mockup2.png" class='wow slideInLeft img-responsive' style='padding-left: 60px;' alt=""/> --> 
               </div> 
              </div> 
              <div class="col-md-6"> 
               <div class="tab-inner"> 
                <h4>FUNDING</h4> 
                <p class='medium-text'> 
                 <%= render 'projects/fundingparticulars' %> 
                </p> 
                <br/> 
                <a class='btn btn-danger btn-line'>PROPOSED TERMS</a> 
                <!-- btn-primary --> 
               </div> 
              </div> 
             </div> 

             <div class="tab-pane row fade" id="tab-content-fourth"> 
              <div class="col-md-6"> 
               <div class="tab-inner"> 
                <h4>EQUIPMENT & MATERIALS</h4> 
                <p class='medium-text'> 
                 <%= render 'projects/materialsparticulars' %> 
                </p> 
                <br/> 
                <a class='btn btn-danger btn-line'>PROPOSED TERMS </a> 
               </div> 
              </div> 
              <div class="col-md-6"> 
               <%= image_tag(@project.package.background_ip.bip_image, :class=>"wow fadeInUp img-responsive", :alt=>"123") %> 
              </div> 
             </div> 

如果背景IP是不正确的，has_data是真实的，那么标签设置正确显示数据标签作为活动，但该标签的内容不显示，直到我点击数据选项卡。相反，如果background_ip属性为true，则该页面将正确显示，并显示背景ip的选项卡内容。

不同之处在于'active'包含在背景ip标签内容的样式中。但只要该属性设置为true，这就是正确的。

我试图添加逻辑<％='主动'如果firstActiveTab == 1％>标签内容面板，但它没有奏效。

任何人都可以看到我现在需要做什么才能让我的标签内容显示为活动选项卡吗？

Answer 1

我想你没有激活与标题标题相关的div。当你做

<li class="col-md-2 col-xs-6 <%= 'active' if firstActiveTab == 2 %>"> 
    <a href="#tab-content-second"></a> 
</li> 

把active类也加到div中。

<div class="tab-pane row <%= firstActiveTab == 2 ? 'active' : 'fade' %>" id="tab-content-second"> 
    // Your code here 
</div>