srcmini我正在尝试将Bootstrap选项卡与ACF集成。
但是, 当我创建多个标签时, 应该如何提取数据？
当我此时使用标签时, 可以用这种方式拉动, 但是当我使用多个标签时, 该怎么办？
如何创建一个循环以使用多个选项卡？
如何提取Tab链接和内容？
前端代码
<!-- tab start -->
<div class="row mar0 tabrk">
<ul class="tabnav nav-pills">
<li class="active"><a data-toggle="pill" href="#home"><img class="img-responsive" src="logo.png"></a></li>
<li><a data-toggle="pill" href="#menu1"><img class="img-responsive" src="logo.png"></a></li>
</ul>
<div class="tabbody tab-content">
<div id="home" class="tab-pane fade in active">
<ul>
<li>
<div class="media">
<div class="media-left" style="border-color: #ecb319;">
<a href="#">
<img class="media-object" src="images/marka/1.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #ecb319;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color: #a8bbe1;">
<a href="#">
<img class="media-object" src="images/marka/2.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #a8bbe1;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color: #3dd0d9;">
<a href="#">
<img class="media-object" src="images/marka/3.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #3dd0d9;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color: #8a8065;">
<a href="#">
<img class="media-object" src="images/marka/4.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #8a8065;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color: #a4d46b;">
<a href="#">
<img class="media-object" src="images/marka/5.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #a4d46b;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color: #164f9c;">
<a href="#">
<img class="media-object" src="images/marka/6.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #164f9c;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color:#f0441c;">
<a href="#">
<img class="media-object" src="images/marka/7.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #f0441c;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color: #9c6cb2;">
<a href="#">
<img class="media-object" src="images/marka/8.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #9c6cb2;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color:#17dfc0; ">
<a href="#">
<img class="media-object" src="images/marka/9.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #17dfc0;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
</ul>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<!-- tab end -->现在：
<div class="row mar0 tabrk">
<ul class="tabnav nav-pills">
<?php $image = get_field('marka_logo');
?>
<li class="active"><a data-toggle="pill" href="#home"><img class="img-responsive" src="<?php echo $image['url']; ?>"></a></li>
</ul>
<div class="tabbody tab-content">
<div id="home" class="tab-pane fade in active">
<ul>
<?php
// check if the repeater field has rows of data
if( have_rows('marka_ozellikler') ):
// loop through the rows of data
while ( have_rows('marka_ozellikler') ) : the_row();
?>
<li>
<div class="media">
<div class="media-left" style="border-color: <?php the_sub_field('marka_color'); ?>;">
<a href="#">
<img class="media-object" src="<?php the_sub_field('marka_sol_gorsel'); ?>">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: <?php the_sub_field('marka_color'); ?>;"><?php the_sub_field('marka_baslik'); ?></h4>
<p><?php the_sub_field('marka_aciklama'); ?></p>
</div>
</div>
</li>
<?php
endwhile;
else :
// no rows found
endif;
?>
</ul>
</div>
</div>
</div>我想要的是：
图片：
谢谢
#1
因此, 你将不得不执行两个while(have_rows(‘repeater’)){}。一个用于选项卡, 一个用于内容。
例子：
<div class="tabs">
<?php while(have_rows('repeater')) : the_row(); ?>
<div class="tab"><?php the_sub_field('tab_name'); ?></div>
<?php endwhile;?>
</div>
<div class="tabs-content">
<?php while(have_rows('repeater')) : the_row(); ?>
<div class="tab-content"><?php the_sub_field('tab_content'); ?></div>
<?php endwhile; ?>
</div>
评论前必须登录！
注册