Tbs切换卡实例实现效果

添加字段-重复器

实例代码

<div class="advantage">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                   <ul class="nav nav-tabs" id="cards" role="tablist">
						<!-- 检测重复器字段：group-introduction-advantage-tabs -->
                		<?php if( have_rows('group-introduction-advantage-tabs') ): ?>
                    	<?php while( have_rows('group-introduction-advantage-tabs') ): the_row(); 
						
						<!-- 切换卡图片 -->
                        $tabsimg = get_sub_field('group-introduction-advantage-tabs-icon');

                        <!-- 切换卡中文名称 -->
                        $tabszh = get_sub_field('group-introduction-advantage-tabs-zh');

                        <!-- 切换卡英文名称 -->
                        $tabsen = get_sub_field('group-introduction-advantage-tabs-en');

                        <!-- 切换卡内容-->
                        $tabscontent = get_sub_field('group-introduction-advantage-tabs-content');
                        ?>

                        <!-- 输出标题 -->
                          <li role="presentation">
                            <a href="#p<?php echo $tabsimg['id']; ?>" aria-controls="p<?php echo $tabsimg['id']; ?>" role="tab" data-toggle="tab">
                                <?php echo $tabszh; ?>
                                <span><?php echo $tabsen; ?></span>
                            </a>
                      </li>
                    <?php endwhile; ?>
                    <?php endif; ?>
                 </ul>

                <div class="tab-content">
                  <?php if( have_rows('group-introduction-advantage-tabs') ): ?>

                     <?php while( have_rows('group-introduction-advantage-tabs') ): the_row(); 
                         $tabsimg = get_sub_field('group-introduction-advantage-tabs-icon');
                         $tabszh = get_sub_field('group-introduction-advantage-tabs-zh');
                         $tabsen = get_sub_field('group-introduction-advantage-tabs-en');
                         $tabscontent = get_sub_field('group-introduction-advantage-tabs-content');
                         ?>

                         <!-- 输出内容 -->
                           <div role="tabpanel" class="tab-pane" id="p<?php echo $tabsimg['id']; ?>">
                                 <?php echo $tabscontent; ?>
                           </div>
                      <?php endwhile; ?>
                  <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

后台控制效果

默认展开第一个选项卡内容（针对于bootstrapTabs）