Je tente de charger dynamiquement des données JSON dans Bootstrap 3 Tab comme le code suivant. Je suis capable de charger les nav-tabs mais pas de succès sur le chargement du contenu. Pouvez-vous s'il vous plaît jeter un oeil à cela et laissez-moi savoir comment y remédier?Impossible de charger correctement l'onglet JSON dans l'onglet Bootstrap
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>
Vous pouvez également ajouter '$ (» onglet contenu div.) Eq (0) .addClass («actif '),..' Après votre '$ (' nav- tabs li '). eq (0) .addClass (' active '); 'pour que vos champs apparaissent au chargement de la page pour l'onglet action. – Tricky12
Bon point. Ajoutée. – SouXin