我想使用带有Repeater附件的高级自定义字段插件的Wordpress制作一些选项卡。
这是我的实际代码:
<?php
if( have_rows('menu_sections') ): ?>
<ul class="nav nav-tabs" id="" role="tablist">
<?php $i=0; while ( have_rows('menu_sections') ) : the_row(); ?>
<?php
$string = sanitize_title( get_sub_field('section_title') );
?>
<li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?> >
<a role="tab" data-toggle="tab"><?php the_sub_field('section_title'); ?></a>
</li>
<?php $i++; endwhile; ?>
</ul>
<div class="tab-content">
<?php $i=0; while ( have_rows('menu_sections') ) : the_row(); ?>
<?php
$string = sanitize_title( get_sub_field('section_title') );
?>
<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="<?php echo $string; ?>">
<?php
while (have_rows('section_items')) {
the_row();
// Display each item as a list
?>
<ul>
<li class="list-unstyled"><?php the_sub_field('dish_name'); ?></li>
<li class="list-unstyled"><?php the_sub_field('dish_description'); ?></li>
<li class="list-unstyled"><?php the_sub_field('dish_price'); ?></li>
</ul>
<?php
} // end while have rows section_items
?>
</div>
<?php $i++; endwhile; ?>
</div>
<?php endif; ?>
此实际代码显示以下内容:
现在,如果我选择其他标签,它将不会更改卡信息,如您在下一张图片中看到的那样:
我使用带有CDN的Bootstrap标签
所以我尝试了许多不同的方法,但都没有成功。
我确实知道如何使它们没有嵌套的中继器,在这种情况下,我不知道为什么它不起作用。我读过其他文章,但也没有取得太大的成功。所以我认为,如果没有显示,那就是css吗?
我会帮助您。 问候!
答案 0 :(得分:1)
尝试更改
<li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?> >
<a role="tab" data-toggle="tab"><?php the_sub_field('section_title'); ?></a>
</li>
到
<li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?> >
<a role="tab" data-toggle="tab" href="#tab-<?php echo $i; ?>"><?php the_sub_field('section_title'); ?></a>
</li>
和
<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="<?php echo $string; ?>">
到
<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="tab-<?php echo $i; ?>">
我希望它能解决问题。您正在将部分标题作为ID分配给选项卡窗格,其中也可能包含空格。始终建议使用不带空格的id。