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-->

显示部分

       <!-----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，如果有人知道请更新我的答案

我的更新回答

     <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

使用引导标签检查此处的完整代码：

<!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>

Answer 2

根据您的代码，可以清除您正在处理 json 数据。首先，对于打印json数据，将 json 转换为数组。之后，选择索引并尝试在选项卡中打印数据。

$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);

回声＆＃34;＆＃34;;

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

2 个答案: