0
我试图像下面的代码一样动态地将JSON数据加载到Bootstrap 3选项卡中。我能够加载导航标签,但加载内容时没有任何成功。你可以看看这个,让我知道如何解决它?无法将JSON正确加载到引导选项卡
var data = {
"action":
[
{ "id": "1001", "name": "Matrix" },
{ "id": "1002", "name": "IP Man" },
{ "id": "1003", "name": "Revenge" }
],
"comedy":
[
{ "id": "2001", "type": "Iceman" },
{ "id": "2002", "type": "Pat & Mat" },
{ "id": "2003", "type": "Sugar" }
],
"animation":
[
{ "id": "3001", "type": "Frozen" },
{ "id": "3002", "type": "Tangled" },
{ "id": "3003", "type": "Croods" }
]
};
for (var i in data) {
$('.nav-tabs').append('<li role="presentation" class=""><a href="#' + i + '" aria-controls="' + i + '" role="tab" data-toggle="tab">' + i + '</a></li>');
}
for (var j = 0; j < data[i].length; j++) {
var obj = data[i][j];
$('.tab-content').append('<div role="tabpanel" class="tab-pane" id="' + obj.name + '">' + obj.name + '</div>');
}
$('.nav-tabs li').eq(0).addClass('active');
body{padding:30px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs" role="tablist"></ul>
<div class="tab-content"></div>
</div>
您还可以添加'$(”标签内容专区 '),EQ(0).addClass(' 活动 ');'后您的'$(' nav-标签li')。eq(0).addClass('active');'让您的字段在页面加载时显示在操作选项卡上。 – Tricky12
好点。添加。 – SouXin