带Kirby的垂直制表符

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中编码……

如果你能帮助我，我将非常高兴，并为这些非常基本的问题道歉

谢谢cian

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 ?>