动态 bootstrap 个活动标签

Question

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

    <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 中，除非你想遍历从外部 cfoutput.

动态 bootstrap 个活动标签

Dynamic bootstrap active tab

coldfusion

tabpanel

twitter-bootstrap