coldfusion - Dynamic bootstrap active tab -


is there way can rid of hard coded active tab , corresponding panel when outputting dynamic content? somehow make first iteration of dynamic content active tab + panel. code below works fine, active tab/panel pretty pointless in scenario.

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

you can give try:

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

note:- don't need wrap lesson_id cfoutput inside cfoutput unless want loop on results returned outer cfoutput.


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -