我正在试图弄清楚如何在我的Rails 4应用程序中显示标签内容 .
我最近问过这个问题 - 其目的是根据属性是设置为true还是false来弄清楚如何设置活动选项卡 . 通过合并该帖子中列出的解决方案（下面的链接），我创建了一个新问题 .
Rails 4 - how to designate active tab to first instance of a true condition
现在 - 当我尝试渲染页面时，如果第一个tab属性不为true，则下一个选项卡上有活动显示，但只有在单击选项卡标签后才会显示该选项卡的内容 .
这些是我的标签：
<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=""></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=""></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=""></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=""></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>
<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>
<% 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>
<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>
<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不为true，则has_data为true，则选项卡设置会正确显示数据选项卡为活动，但在单击数据选项卡之前，该选项卡的内容不会显示 . 相反，如果background_ip属性为true，则页面显示正确，并显示后台ip的选项卡内容 .
区别在于“活动”包含在后台ip选项卡内容的样式中 . 但只要属性设置为true，这只是正确的 .
我尝试将逻辑<％='active'（如果firstActiveTab == 1％>）添加到选项卡内容面板，但它不起作用 .
任何人都可以看到我现在需要做什么才能显示活动标签的标签内容？
1 回答
我猜你没有用标签 Headers 激活相关的div . 当你这样做
也将
active类添加到div .