Expression Engine channel entries with Twitter Bootstrap Tabs Not working

Question

I'm having an issue implementing Twitter Bootstrap's Tabs with the {exp:channel:entries} pair. It has to do with the fact that you must designate the first active tab as via applying an .active class to it for bootstrap to know which tab is presented upon load. But my code is as follows

       <div class="tabbable">
      <ul class="nav navtabs thumbnails">
        {exp:channel:entries channel="member_profiles" limit="4"}
        <li class="active">
          <a class="thumbnail" href="#{member_first_name}-{member_last_name}-tab" data-toggle="tab">
            <img src="{site_url}-/img/240x232.gif" alt="">
          </a>
          <div class="caption">
            <h4>{member_first_name} {member_last_name}</h4>
          </div>
        </li>
        {/exp:channel:entries}
      </ul>
    </div>
  </div>

    <div class="tab-content">
      {exp:channel:entries channel="member_profiles" limit="4" dynamic="no"}
          <div id="{member_first_name}-{member_last_name}-tab" class="tab-pane active">
            <div class="span6">
              <img class="thumbnail" src="{site_url}-/img/250x321.gif" alt="">
            </div>
      {/exp:channel:entries}
    </div>

The problem area that I can't seem to get my head around is class="tab-pane active row people-profile"> From what I can see all tabs appear on the page because all channel entries have the .active class applied to them. I have tried adding {switch="active|||"} to no avail. Also the {if count == 1}active{/if} answer from here doesn't achieve the desired result.

Help greatly appreciated.

Answer 1

Well, both {switch} and conditional checks on count should work. I'd go with the conditional myself.

... {if count == "1"} class="active"{/if} ...

Or:

... class="tab-pane{if count == "1"} active{/if}" ...

When you say "doesn't achieve the desired result", it would help to know what it does produce in your markup.