2016-10-13 11 views
1

私は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(); 

を追加する必要があります。私はこれに数時間を費やしており、私の周りに私の頭を得ることができません...

+0

まあ、クリック機能がタブに与える影響によって異なります。これをアクティブなクラスに設定し、その内容を 'display:block;'に設定すると、最初のループに追加する必要があります。 – Phiter

答えて

0
  • を見つけます。 $製品のうち
  • $製品の1番目を識別して、デフォルトのタブにする場合に使用します。
+0

申し訳ありませんが、私はそれを得ていませんでした。私はあなたの答えを再読しようとしましたが、まだそれを取得していません。例を挙げたり、詳細を説明してください。 –

+0

if(i == 0){tabcontent [0] .style.display = "inline"; } else {tabcontent [i] .style.display = "none"; } –

関連する問題