Question

在我最新的Wordpress项目中，我试图弄清楚如何将JQuery选项卡与ACF转发器字段结合使用。第一个工作，但现在我想要在一个页面上包含几个选项卡的多个div。以下内容未显示选项卡中的内容（脚本无法处理这些内容）。据我所知，这是由div（#tabs）的ID引起的。因此，我想在此ID中添加一些内容，以确定这是否可以解决我的问题。比如＃tabs1，＃tabs2，＃tabs3等。我不能手动给每个div自己的ID，因为它们是在循环中创建的（ACF转发器字段）。一直在寻找几天，似乎无法在脚本中找到如何做到这一点。希望有人能引导我朝着正确的方向前进。

<script>                                      
   jQuery(document).ready(function($) {
      $('#tabs').tabs();
   })
</script>

创建标签的循环：

<?php if( have_rows('slider') ): ?>
   <div id="tabs">

      <?php while(have_rows('slider') ): the_row(); ?>
         <div id="<?php the_sub_field('tab_title');?>">
            <?php the_sub_field('tab_content');?>
         </div>
      <?php endwhile; ?>

      <ul>
         <?php while(have_rows('slider') ): the_row(); ?>
            <li><a href="#<?php the_sub_field('tab_title');?>"><?php the_sub_field('tab_title'); ?></a></li>
         <?php endwhile; ?>
      </ul>

   </div>
<?php endif; ?>

以下是一个网站示例，其设置类似于我正在尝试实现的内容...请注意，每个部分都有一个带有按钮的幻灯片放映（在我的情况下是'标签'），用于选择不同的幻灯片。 http://partnersandspade.com/studio/

Answer 1

<强>更新

改为上课应该有效，但如果没有，我会建议稍微改变你的ACF结构。您可以在另一个转发器字段中包含滑块转发器＆＃34; tabs＆＃34;然后你就可以在循环中循环（docs - 嵌套的lops），这样你就可以给每个＆＃34;标签＆＃34;一个独特的身份。请参阅以下代码：

 <?php if( have_rows('tabs') ): ?>
      <?php $i = 1; while(have_rows('tabs') ): the_row(); ?>
            <div id="tabs<?php echo $i++; ?>">

                 <?php while(have_rows('slider') ): the_row(); ?>
                       <div id="<?php the_sub_field('tab_title');?>">
                             <?php the_sub_field('tab_content');?>
                       </div>
                 <?php endwhile; ?>

                 <ul>
                       <?php while(have_rows('slider') ): the_row(); ?>
                             <li><a href="#<?php the_sub_field('tab_title');?>"><?php the_sub_field('tab_title'); ?></a></li>
                       <?php endwhile; ?>
                 </ul>

            </div>
      <?php endwhile; ?>
<?php  endif; ?>

我第一次被误解了。您是否考虑过更改ID =＆＃34;标签＆＃34; to class =＆＃34; tabs＆＃34;。这应该可以解决问题：

<script>                                      
    jQuery(document).ready(function($) {
        $('.tabs').tabs();
    })
</script>

标记：

 <div class="tabs">

IGONRE BELOW：

使用值＆＃34; 1＆＃34;添加变量$ i;并在循环结束时增加其值。

替换

<?php the_sub_field('tab_title');?>

与

tabs<?php echo $i;?>

所有这一切都应该为每行提供唯一的ID。

<?php $i = 1; while(have_rows('slider') ): the_row(); ?>
     <div id="tabs<?php echo $i;?>">
        <?php the_sub_field('tab_content');?>
     </div>
  <?php $i++; endwhile; ?>

Answer 2

我认为问题出在<div id="<?php the_sub_field('tab_title');?>">。如果你的tab_title有空格，逗号，引号（最有可能因为它是标题而不是slug）并且你将它用作元素id那么这是无效的并且可能会导致一些问题。

使用简单的ids代替。 tab-1，tab-2，tab-2等，

e.g。

<?php if( have_rows('slider') ): ?>
   <div id="tabs">

      <?php $i = 1; ?> <!-- initiate the loop count var -->
      <?php while(have_rows('slider') ): the_row(); ?>
        <div id="#tab-<?php echo $i;?>">
          <?php the_sub_field('tab_content');?>
        </div>
        <?php $i++; ?>
      <?php endwhile; ?>

      <ul>
        <?php $i = 1; ?> <!-- initiate the loop count var -->
        <?php while(have_rows('slider') ): the_row(); ?>
          <li><a href="#tab-<?php echo $i;?>"><?php the_sub_field('tab_title'); ?></a></li>
          <?php $i++; ?>
        <?php endwhile; ?>
      </ul>

   </div>
<?php endif; ?>

Answer 3

这就是我现在所在的地方......

我设法给所有tab包装器（#tabs）它自己的ID，这个包装器中的所有选项卡也将获得一个唯一的ID。

<?php $tabsId = 1; while ( have_posts() ) : the_post(); ?>
    <article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
        <header class="article-header">
            <h1 class="h2 entry-title"><?php the_title(); ?></h1>
         </header>

         <?php if( have_rows('slider') ): ?>
             <div id="tabs<?php echo $tabsId; ?>">

                 <?php $tabId = 1; while(have_rows('slider') ): the_row(); ?>
                     <div id="tab<?php echo $tabId;?>">
                         <?php the_sub_field('tab_content');?>
                     </div>
                 <?php $tabId++; endwhile; ?>

                 <ul class="tabs">
                     <?php $tabId = 1; while(have_rows('slider') ): the_row(); ?>
                         <li><a href="#tab<?php echo $tabId;?>"><?php the_sub_field('tab_title'); ?></a></li>
                     <?php $tabId++; endwhile; ?>   
                 </ul>

             </div>
         <?php endif; ?>

         <section class="entry-content cf">
             <?php the_content(); ?>
         </section>

     </article>

 <?php $tabsId++; endwhile; ?>

但是我认为我需要以某种方式更改脚本，因此它知道我不是以#tabs div为目标但是我的目标是＃tabs1，＃tabs2，＃tabs3等。这是我正在使用的脚本我正在使用它。有没有办法改变它，所以它运行在每个#tabs .. div？

jQuery(document).ready(function($) {
   $('#tabs1').each(function(){
   // For each set of tabs, we want to keep track of
   // which tab is active and it's associated content
   var $active, $content, $links = $(this).find('a');

   // If the location.hash matches one of the links, use that as the active tab.
   // If no match is found, use the first link as the initial active tab.
   $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
   $active.addClass('active');
   $content = $($active[0].hash);

   // Hide the remaining content
   $links.not($active).each(function () {
   $(this.hash).hide();
   });

   // Bind the click event handler
   $(this).on('click', 'a', function(e){
   // Make the old tab inactive.
   $active.removeClass('active');
   $content.hide();

   // Update the variables with the new link and content
   $active = $(this);
   $content = $(this.hash);

   // Make the tab active.
   $active.addClass('active');
   $content.show();

   // Prevent the anchor's default click action
   e.preventDefault();
   });
});
})

JQuery选项卡 - 每个容器div的唯一ID

3 个答案: