如何显示我的Wordpress循环中的第一个选项卡？ 我正在使用WordPress和基础选项卡。

目标： 在垂直基础选项卡中显示特定类别的WordPress帖子。 我当前在此处显示了一个静态版本： 在项目下

问题: 在页面加载时，显示的第一个选项卡为空。但是，当您单击选项卡时，它们将正确显示

问题: 如何在页面加载中显示第一个选项卡项

以下是显示问题的测试页面：

代码

---

如果我能提供更多信息，请告诉我。提前谢谢。

您需要让代码将类添加到.tabs>dl和.tabs content>div中，以便在页面加载时显示

将此项添加到$tab_number=。。。要使第一个选项卡成为加载时的活动选项卡，请执行以下操作：

$active_class = (1 == $tab_number) ? 'active' : '';

然后在输出中：

<dd class="<?php echo $active_class;?>" ><a href=...
<div class="content <?php echo $active_class;?>"...

有关更多详细信息，请参阅。

有关解决方案，请参阅帽尖CPILKO

这里是如何在垂直基础选项卡中显示特定类别的WordPress帖子。 要显示您的帖子，只需添加您的类别名称 “category_name=YourCategoryName” 解决方案

<dd class="<?php echo $active_class;?>" ><a href=...
<div class="content <?php echo $active_class;?>"...

<div class="full-width" id="projects">
<div class="row">
    <div class="small-4 medium-3 large-3 columns">          
        <dl class="tabs vertical profile-tabs" data-tab>
        <?php
         $displayposts = new WP_Query();
         $displayposts->query('category_name=Projects');
         while ($displayposts->have_posts()) : $displayposts->the_post();
         $tab_number = $displayposts->current_post + 1; 
         $active_class = (1 == $tab_number) ? 'active' : '';            
          ?> 
          <dd class="<?php echo $active_class;?>"><a href="#tab<?php echo $tab_number;?>"><?php the_title(); ?></a></dd>
          <?php endwhile; ?>
        </dl>
    </div>  

    <div class="small-8 medium-9 large-9 columns">
        <div class="tabs-head">Projects</div>

        <div class="tabs-content">  
              <?php   
              while ($displayposts->have_posts()) : $displayposts->the_post();
              $tab_number = $displayposts->current_post + 1;
              $active_class = (1 == $tab_number) ? 'active' : ''; 
              ?> 
              <div class="content <?php echo $active_class;?>" id="tab<?php echo $tab_number;?>">
                <h2><?php the_title(); ?></h2>
                <div class="row">
                    <div class="medium-9 large-9 columns">
                        <?php the_post_thumbnail(); ?>
                        <p><small>Show above: Huiit Zolars</small></p>
                    </div>

                    <div class="medium-3 large-3 columns">
                    <?php the_content(); ?>
                    </div>
                </div>
              </div>
              <?php endwhile; ?>

        </div>

    </div>
</div>