javascript - 带有 Twitter Bootstrap 选项卡的表达式引擎 channel 条目不起作用

Question

我在使用 {exp:channel:entries} 对实现 Twitter Bootstrap 的选项卡时遇到问题。它与以下事实有关:您必须通过向其应用 .active 类来指定第一个事件选项卡，以便 Bootstrap 知道加载时显示哪个选项卡。但我的代码如下

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

我似乎无法理解的问题区域是 class="tab-pane active row people-profile"> 从我可以看到的所有选项卡都显示在页面上，因为所有 channel 条目都应用了 .active 类。我尝试添加 {switch="active|||"} 但无济于事。还有 here 的 {if count == 1}active{/if} 答案没有达到预期的效果。

非常感谢您的帮助。

Answer 1

嗯，{switch} 和对 count 的条件检查都应该有效。我自己会选择条件式。

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

或者:

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

当您说“没有达到预期的结果”时，了解它在您的标记中会产生什么会有所帮助。