Question

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

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

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

现在 - 当我尝试渲染页面时，如果第一个tab属性不为true，则下一个选项卡上有活动显示，但只有在单击选项卡标签后才会显示该选项卡的内容。

这些是我的标签：

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

这些是相应的标签内容：

my_find_command

如果后台IP不为true，则has_data为true，则选项卡设置会正确显示数据选项卡为活动状态，但在单击数据选项卡之前，该选项卡的内容不会显示。相反，如果background_ip属性为true，则页面显示正确，并显示后台ip的选项卡内容。

不同之处在于，“active”包含在后台ip选项卡内容的样式中。但只要该属性设置为true，这只是正确的。

如果firstActiveTab == 1％＆gt;我尝试添加逻辑＆lt;％='active'到选项卡内容面板，但它不起作用。

有人可以看到我现在需要做什么才能显示活动标签的标签内容吗？

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>

Rails 4 - 如何显示选项卡内容而无需单击选项卡标签

1 个答案: