2016-10-13 3 views
1

CodeIgniter 프레임 워크를 사용하고 배열 $ products 배열을 pasing하여보고 있습니다. 보기에서 저는 제품에 대한 탭을 만들고 싶습니다. 보기 용 코드는 다음과 같습니다.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> 

정상적으로 작동하지만 기본 탭은 없습니다. 기본 탭을 추가하려면 먼저 추가 할 필요가 있습니다.

document.getElementById("defaultOpen").click(); 

내 JS에, id="defaultOpen" 첫 번째 링크에 추가해야합니다. 나는 이것에 약간 시간을 소요하고 나의 머리를 주변에 얻을 수 없다 ...

+0

음 클릭 기능이 탭에 미치는 영향에 달려 있습니다. 활성 클래스로 설정하고 내용을'display : block;'으로 설정하면, 예를 들어 첫 번째 루프에 추가해야합니다. – Phiter

답변

0
  • 밖으로 알아 내십시오. of $ products
  • 첫 번째 $ 제품을 식별하여 기본 탭으로 사용하려면를 사용하십시오.
+0

미안하지만 나는 그것을 얻지 못했습니다. 나는 당신의 대답을 다시 읽으려고했으나 아직도 그것을 얻지 못했습니다. 예를 들거나 자세한 내용을 설명해 주시겠습니까? –

+0

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

관련 문제