如何在选项卡中使用动态值

Question

这里我有一个 Nav Tabs 部分，如果我提供像

这样的静态值，我必须显示产品标题的基础选项卡部分

电脑配件
电子

TABS

<!-- Nav tabs START-->
                  <ul class="nav nav-tabs tabs-left sideways">
                    <li><a href="#Computer Accessories" data-toggle="tab">Computer Accessories</a></li>
                    <li><a href="#Electronic" data-toggle="tab">Electronic</a></li>
                  </ul>       
                <!-- Nav tabs END-->

DISPLAY SECTION

       <!-----Computer Accessories categoryName Start---------->            
            <div class="tab-pane" id="Computer Accessories">
                <div class="row">
                    <div class="col-sm-3">
                           <h1>Prodcut 1</h2>           
                    </div>
                </div>          
            </div>
        <!-----Computer Accessories categoryName End---------->


         <!-----Electronic categoryName Start---------->            
            <div class="tab-pane" id="Electronic">
                <div class="row">
                    <div class="col-sm-3">
                           <h1>Prodcut 2</h2>           
                    </div>

                    <div class="col-sm-3">
                           <h1>Prodcut 3</h2>           
                    </div>
                </div>          
            </div>
        <!-----Electronic categoryName End---------->

现在我给静态值 Computer Accessories 和 Electronic 所以它工作正常，但对我来说不想要静态值，我必须给动态 categoryName 值

print_r($mainArray)

    {
    "status": "success",
    "message": "Total 4 record(s) found.",
    "total_record": 4,
    "data": [
        {
            "categoryName": "Computer Accessories",
            "categoryId": "4",
            "products": [
                {
                    "productId": "Prodcut 1",
                    "Galery": [
                        {
                            "gId": "10",
                            "productId": "4",
                            "prodcutImage": "2df674d73106dfc64777c75818eb4359.jpg"
                        }
                    ],
                    "discountType": "Percentage",
                }
            ]
        },
        {
            "categoryName": "Electronic",
            "categoryId": "1",
            "products": [
                {
                    "productId": "Prodcut 2",
                    "Galery": [
                        {
                            "gId": "10",
                            "productId": "4",
                            "prodcutImage": "2df674d73106dfc64777c75818eb4359.jpg"
                        },
                        {
                            "gId": "11",
                            "productId": "4",
                            "prodcutImage": "65458600d6b7b9df1a38a9341ad2336b.jpg"
                        }
                    ],
                    "discountType": "NA",

                },
                {
                    "productId": "Prodcut 3",

                    "Galery": [
                        {
                            "gId": "10",
                            "productId": "4",
                            "prodcutImage": "2df674d73106dfc64777c75818eb4359.jpg"
                        }
                    ],
                    "discountType": "Percentage",
                }
            ]
        }
    ]
}

动态使用上面的数组我们还必须显示 tabs tabs section，如果有人知道请更新我的答案

My Updated answer

     <ul class="nav nav-tabs">
   <?php foreach ($arr['data'] as $string)  { 
    echo ' <li><a href="'.$string['categoryName'].'" data-toggle="tab">'.$string['categoryName'].'</a></li>';
   }
 ?>
  </ul>

Answer 1

根据你的代码，可以明确你处理的是json数据。首先，为了打印 json 数据，请将您的 json 转换为数组。之后，select 索引并尝试在选项卡中打印数据。

$json = " {
    "status": "success",
    "message": "Total 4 record(s) found.",
    "total_record": 4,
    "data": [
        {
            "categoryName": "Computer Accessories",
            "categoryId": "4",
            "products": [
                {
                    "productId": "Prodcut 1",
                    "Galery": [
                        {
                            "gId": "10",
                            "productId": "4",
                            "prodcutImage": "2df674d73106dfc64777c75818eb4359.jpg"
                        }
                    ],
                    "discountType": "Percentage",
                }
            ]
        },
        {
            "categoryName": "Electronic",
            "categoryId": "1",
            "products": [
                {
                    "productId": "Prodcut 2",
                    "Galery": [
                        {
                            "gId": "10",
                            "productId": "4",
                            "prodcutImage": "2df674d73106dfc64777c75818eb4359.jpg"
                        },
                        {
                            "gId": "11",
                            "productId": "4",
                            "prodcutImage": "65458600d6b7b9df1a38a9341ad2336b.jpg"
                        }
                    ],
                    "discountType": "NA",

                },
                {
                    "productId": "Prodcut 3",

                    "Galery": [
                        {
                            "gId": "10",
                            "productId": "4",
                            "prodcutImage": "2df674d73106dfc64777c75818eb4359.jpg"
                        }
                    ],
                    "discountType": "Percentage",
                }
            ]
        }
    ]
}";

$jsonArray = json_decode($json);
echo "<pre>";
print_r($jsonArray);

回声“”；

Answer 2

在此处查看带有 bootstrap 个选项卡的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<?php 
$arr = json_decode('{
    "status": "success",
    "message": "Total 4 record(s) found.",
    "total_record": 4,
    "data": [
        {
            "categoryName": "Computer Accessories",
            "categoryId": "4",
            "products": [
                {
                    "productId": "Prodcut 1",
                    "Galery": [
                        {
                            "gId": "10",
                            "productId": "4",
                            "prodcutImage": "2df674d73106dfc64777c75818eb4359.jpg"
                        }
                    ],
                    "discountType": "Percentage"
                }
            ]
        },
        {
            "categoryName": "Electronic",
            "categoryId": "1",
            "products": [
                {
                    "productId": "Prodcut 2",
                    "Galery": [
                        {
                            "gId": "10",
                            "productId": "4",
                            "prodcutImage": "2df674d73106dfc64777c75818eb4359.jpg"
                        },
                        {
                            "gId": "11",
                            "productId": "4",
                            "prodcutImage": "65458600d6b7b9df1a38a9341ad2336b.jpg"
                        }
                    ],
                    "discountType": "NA"

                },
                {
                    "productId": "Prodcut 3",
                    "Galery": [
                        {
                            "gId": "10",
                            "productId": "4",
                            "prodcutImage": "2df674d73106dfc64777c75818eb4359.jpg"
                        }
                    ],
                    "discountType": "Percentage"
                }
            ]
        }
    ]
}', true);

?>
<div class="container">
  <h3>Tabs With Dropdown Menu</h3>
  <ul class="nav nav-tabs">
   <?php foreach ($arr['data'] as $string)  { 
    echo ' <li><a href="'.$string['categoryName'].'" data-toggle="tab">'.$string['categoryName'].'</a></li>';
   }
 ?>
  </ul>
</div>

</body>
</html>

已编辑：

简单代码：

    <div class="container">
      <h3>Tabs With Dropdown Menu</h3>
      <ul class="nav nav-tabs" id="myTab" role="tablist">
  <?php foreach ($arr['data'] as $string)  { 
    echo '  <li class="nav-item">
    <a class="nav-link" id="'.$string['categoryId'].'-tab" data-toggle="tab" href="#'.$string['categoryId'].'" role="tab" aria-controls="'.$string['categoryId'].'" aria-selected="true">'.$string['categoryName'].'</a>
  </li>';
   }
 ?>
</ul>
<div class="tab-content" id="myTabContent">
<?php foreach ($arr['data'] as $string)  { ?>
    <div class="tab-pane fade" id="<?php echo $string['categoryId']; ?>" role="tabpanel" aria-labelledby="<?php echo $string['categoryId']; ?>-tab"><?php foreach ($string['products'] as $product) { ?>
            <div class="col-sm-3">
                <h1><?php echo $product['productId']; ?></h2>           
            </div>

        <?php }?></div>


<?php }?>
</div>
</div>     
    </div>

如何在选项卡中使用动态值

How to use dynamic values in tabs

php

php-5.6