2
私はデータベースからデータを取得し、タブに表示するモーダルを持っています。タブとタブの内容は動的に作成されます。すべてのクラスと階層はul内のliアイテムが水平に整列されているのではなく積み上げられているので、私はHTMLマークアップとブートストラップクラスをクロスチェックしましたが、私はそう思わないそこにあるべきでないものや見つからないものを見つけてください。ここでモーダル内のブートストラップタブ
This is my html markup created using jquery
のタブを作成し、私のjqueryのコードです。
$.ajax({
url: 'getevent',
type: 'post',
data: {'date':[$(this).html(),$("#date").html()]},
success: function(response){
var response = $.parseJSON(response);
console.log(response === null);
if(response!==null){
var loopIndex = 1;
var ul=document.createElement("ul");
var tabContent = document.createElement("div");
$(ul).addClass("nav nav-tabs");
$(tabContent).addClass("tab-content");
$.each(response,function(index,object){
//create a tab for each event and add them to modal
var li = document.createElement("li");
var a = document.createElement("a");
$(a).attr({'href':'event'+loopIndex,'data-toggle':'tab'}).html(object.title);
$(li).append(a);
$(ul).append(li);
var tabPanes = document.createElement("div");
if(loopIndex==1){
$(li).addClass('active');
$(tabPanes).addClass("active in");
}
$(tabPanes).addClass("tab-pane fade");
$(tabPanes).attr('id','event'+loopIndex);
$(tabPanes).html("<p>"+object.discription+"</p>");
$(tabContent).append(tabPanes);
loopIndex++;
});
$("#modal-body").html("");
$("#modal-body").append(ul);
$("#modal-body").append(tabContent);
}
}
ありがとうございます。