私はCodeIgniterフレームワークを使用して、配列$ productsの配列を見て表示しています。私は製品のタブを作成したいと考えています。表示するコードは次のとおりです。PHPのforeachループで余分なデータを追加するには?
<ul class="tab">
<?php foreach ($products as $products_item): ?>
<li><a href="#" class="tablinks" onclick="openProduct(event, '<?= $products_item['product_id']; ?>')"><?=$products_item['product_id']?></a></li>
<?php endforeach; ?>
</ul>
<?php foreach ($products as $products_item): ?>
<div id="<?=$products_item['product_id']?>" class="tabcontent">
<img src="<?php echo base_url(); ?>/uploads/<?php echo $products_item['image_url'];?>" /><br>
<?php echo $products_item['manufacturer']; ?><br>
<?php echo $products_item['health']; ?>
</div>
<?php endforeach; ?>
<script type="text/javascript">
function openProduct(evt, productId) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(productId).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
これはうまく動作しますが、デフォルトのタブはありません。デフォルトのタブを追加するには、私は最初のリンクに私のJSとid="defaultOpen"
に
document.getElementById("defaultOpen").click();
を追加する必要があります。私はこれに数時間を費やしており、私の周りに私の頭を得ることができません...
まあ、クリック機能がタブに与える影響によって異なります。これをアクティブなクラスに設定し、その内容を 'display:block;'に設定すると、最初のループに追加する必要があります。 – Phiter