Question

在输出动态内容时，有没有办法摆脱硬编码的活动标签和相应的面板？我想以某种方式使动态内容的第一次迭代成为活动选项卡+面板。下面的代码运行正常，但在这种情况下，活动选项卡/面板是毫无意义的。

    <div role="tabpanel">

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <cfoutput query="lessons" group="lesson_date"> 
    <li role="presentation"><a href="###DateFormat(lesson_date, 'ddddd')#" aria-controls="#DateFormat(lesson_date, 'ddddd')#" role="tab" data-toggle="tab">#DateFormat(lesson_date, 'ddddd')#, #DateFormat(lesson_date, 'd')# #DateFormat(lesson_date, 'mmmm')#</a></li>     
    </cfoutput>    
</ul>

<!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Home</div>
    <cfoutput query="lessons" group="lesson_date">
    <div role="tabpanel" class="tab-pane" id="#DateFormat(lesson_date, 'ddddd')#">
    <cfoutput>#lesson_ID#<br></cfoutput>
    </div>
    </cfoutput>
  </div>

</div>

Answer 1

你可以尝试一下：

<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <cfoutput query="lessons" group="lesson_date"> 
      <li role="presentation" <cfif lessons.currentRow EQ 1>class="active"</cfif>>
        <a href="###DateFormat(lesson_date, 'ddddd')#" 
           aria-controls="#DateFormat(lesson_date, 'ddddd')#" 
           role="tab" data-toggle="tab"
           >#DateFormat(lesson_date, 'ddddd')#, #DateFormat(lesson_date, 'd')# #DateFormat(lesson_date, 'mmmm')#
        </a>
      </li>     
    </cfoutput>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <cfoutput query="lessons" group="lesson_date">
      <div role="tabpanel" class="#lessons.currentRow EQ 1 ? 'tab-pane active' : 'tab-pane'#" id="#DateFormat(lesson_date, 'ddddd')#">
        #lesson_ID#<br>
      </div>
    </cfoutput>
  </div>

</div>

注意： - 您不需要使用cfoutput包装lesson_ID，因为它已经在cfoutput中，除非您想循环从外部{{1}返回的结果}。

动态引导活动选项卡

1 个答案: