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);
}
}
고맙습니다.