dongmei2956 2018-03-26 15:21
浏览 55
已采纳

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

Here i am having one Nav Tabs section ,and based tab section i have to display the product heading if i am giving static value like

  1. Computer Accessories
  2. Electronic

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

Now i am giving static values Computer Accessories and Electronic so It is working fine, but for me don't want static value , i have to give dynamic categoryName value

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",
                }
            ]
        }
    ]
}

Using above array dynamically we have to display the tabs as well tabs section, if any one know means please update my answer

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>
  • 写回答

2条回答 默认 最新

  • douzhang1955 2018-03-26 16:00
    关注

    Check here full code with bootstrap tabs:

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

    Edited:

    Simple Codes:

        <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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度