1

我是新来的，如果我犯了任何错误，请原谅我......

我根据 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 中编写代码...

如果您能帮助我并为这些非常基本的问题感到抱歉，我将非常高兴

谢谢钱

4

1 回答 1

1

集合中的页面有一种isFirst()方法可以用来检查它们是否在第一个位置（Kirby 文档）。

如果您只希望第一个孩子拥有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 ?>
于 2020-04-27T09:42:27.493 回答