- HTMLのナビゲーションピルを作成します。以下は例です。
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#messages">Messages</a>
</li>
</ul>
- PHPでデータを取得します。データベースからのデータや外部ファイルからのデータなど、任意の方法でデータを取得できます。
<?php
// データの取得方法の例
$data = [
[
'title' => 'News',
'tag' => 'news',
'content' => 'This is a news article.',
],
[
'title' => 'Events',
'tag' => 'events',
'content' => 'This is an events article.',
],
// 追加のデータ...
];
// 取得したデータをループ処理してナビゲーションピルに追加する
foreach ($data as $item) {
$title = $item['title'];
$tag = $item['tag'];
// ナビゲーションピルにデータを追加するHTMLを生成
echo '<li class="nav-item">';
echo '<a class="nav-link" data-toggle="pill" href="#' . $tag . '">' . $title . '</a>';
echo '</li>';
}
?>
上記の例では、$data
という配列にデータが格納されており、foreach
ループを使用して各データをナビゲーションピルに追加しています。
- ナビゲーションピルのコンテンツを表示します。ナビゲーションピルの各リンクには、
href
属性で対応するコンテンツの識別子(IDなど)を指定する必要があります。
<div class="tab-content">
<div id="home" class="tab-pane fade show active">
<h3>Home</h3>
<p>This is the home content.</p>
</div>
<div id="profile" class="tab-pane fade">
<h3>Profile</h3>
<p>This is the profile content.</p>
</div>
<div id="messages" class="tab-pane fade">
<h3>Messages</h3>
<p>This is the messages content.</p>
</div>
</div>
各コンテンツ要素は、対応するリンクのhref
属性で指定された識別子(ここではID)を使用しています。
これで、PHPを使用してナビゲーションピルにデータを追加し、それぞれのリンクに対応するコンテンツを表示することができます。必要に応じて、データの取得方法やコンテンツの表示方法をカスタマイズしてください。