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)