带有柯比的垂直标签

Question

我是新来的，如有错误请见谅...

我根据 w3school 的教程为我的作品集网站构建了一个垂直选项卡： https://www.w3schools.com/howto/howto_js_vertical_tabs.asp

所以我用引用我的项目标题的 php 代码更改了城市名称... 但问题是，当我重新加载页面时，没有预先选择任何选项卡，因此会显示所有项目的内容。

<div class="col-4 tab">
                <div class="fixed-top">


                    <?php foreach($page->children()->listed() as $project): ?>

                        <button class="tablinks" onclick="openCity(event, '(<?= $project->title() ?>)')" id="defaultOpen"><?= $project->title() ?></button>

                    <?php endforeach ?>

                </div>
            </div>


            <?php foreach($page->children()->listed() as $project): ?>

                <div class="col-8 tabcontent" id="(<?= $project->title() ?>)">
                    <h3><?= $project->title() ?></h3>
                </div>

            <?php endforeach ?>

我认为问题在于，我必须只选择第一个项目并将 defaultOpen id 放入其中，然后选择所有其他项目。

但我不确定如何在 php 中编写代码...

如果您能帮助我，我会很高兴，并对这些非常基本的问题表示歉意

谢谢 钱

Answer 1

集合中的页面有一个isFirst() 方法，可用于检查它们是否位于第一个位置 (Kirby docs)。

如果您只希望第一个孩子拥有defaultOpen id，您可以这样使用它：

<?php foreach($page->children()->listed() as $project): ?>
  <button
    <?= $project->isFirst() ? 'id="defaultOpen"' : '' ?>
    class="tablinks"
    onclick="openCity(event, '(<?= $project->title() ?>)')">
      <?= $project->title() ?>
  </button>
<?php endforeach ?>