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(。

如果你只想让第一个孩子拥有defaultOpenid，你可以这样使用它：

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