Динамически создавать html для вкладок jQuery

Я пытаюсь написать страницу, создавая почти все html через javascript. Я хочу использовать вкладки jQuery в моем проекте. Содержимое создается, но вкладки не отображаются. Это проблема CSS?Динамически создавать html для вкладок jQuery

function buildDocument() { 

    var tabsContainer = document.getElementById("tabs"); 

    tabsContainer.innerHTML = ""; 

    var uList = document.createElement("ul"); 

    var li1 = document.createElement("li"); 
    var li2 = document.createElement("li"); 

    li1.innerHTML = '<a href="#tabs-1">One</a>'; 
    li2.innerHTML = '<a href="#tabs-2">One</a>'; 

    uList.appendChild(li1); 
    uList.appendChild(li2); 

    var t1 = document.createElement("div"); 
    var t2 = document.createElement("div"); 

    t1.id = "tabs-1"; 
    t2.id = "tabs-2"; 

    t1.innerHTML = "Tab1"; 
    t2.innerHTML = "Tab2"; 

    tabsContainer.appendChild(uList); 
    tabsContainer.appendChild(t1); 
    tabsContainer.appendChild(t2); 

    $("#tabs").tabs(); 
}

И HTML:

<!doctype html> 
<html> 
    <head> 
     <script src="main.js"></script> 
     <script type="text/javascript" src="external/jquery/jquery.js"></script> 
     <script type="text/javascript" src="jquery-ui.js"></script> 
     <link href="jquery-ui.css" rel="stylesheet" type="text/css" media="screen" /> 
    </head> 
    <body onload="buildDocument();"> 
     <div id="tabs"> 
     </div> 
    </body> 
</html>

Файлы JQuery я скачал с их сайта здесь (все, по умолчанию): http://jqueryui.com/download/

This is what I get

источник

2015-12-16 ack_ilost

Если вы щелкните правой кнопкой мыши на странице и выберите «Показать исходный код», а затем попытаться сделать нажмите на jquery-ui.css и покажите нам ответ .... или в Dev Tools, в закладке Network, перезагрузите свой сайт и посмотрите, не загружен ли один из ваших скриптов ... – Hackerman

Ваш код работает для меня.

Мои включают в себя следующие:

 
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/> 
<script src="http://code.jquery.com/jquery-1.11.3.js"> 
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js">

function buildDocument() { 
 

 
    var tabsContainer = document.getElementById("tabs"); 
 

 
    tabsContainer.innerHTML = ""; 
 

 
    var uList = document.createElement("ul"); 
 

 
    var li1 = document.createElement("li"); 
 
    var li2 = document.createElement("li"); 
 

 
    li1.innerHTML = '<a href="#tabs-1">One</a>'; 
 
    li2.innerHTML = '<a href="#tabs-2">One</a>'; 
 

 
    uList.appendChild(li1); 
 
    uList.appendChild(li2); 
 

 
    var t1 = document.createElement("div"); 
 
    var t2 = document.createElement("div"); 
 

 
    t1.id = "tabs-1"; 
 
    t2.id = "tabs-2"; 
 

 
    t1.innerHTML = "Tab1"; 
 
    t2.innerHTML = "Tab2"; 
 

 
    tabsContainer.appendChild(uList); 
 
    tabsContainer.appendChild(t1); 
 
    tabsContainer.appendChild(t2); 
 

 
    $("#tabs").tabs(); 
 
}

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
 

 

 
<body onload="buildDocument();"> 
 
<div id="tabs"> 
 
</div> 
 
</body>

источник

2015-12-16 18:27:58 gaetanoM

Я запускаю это локально, это не размещены нигде. Возможно, это проблема? –

@ack_ilost да, потому что ссылка на jquery неверна, например, например. Если вы запускаете локально без сервера, вам нужно добавить http: до пути к ресурсам jquery. Я исправил это в своем ответе. Не могли бы вы попробовать еще раз и сообщить мне? – gaetanoM

Я получил его для работы. Вы были правы, ресурсы не были загружены должным образом. Большое спасибо. :) –

является jquery-ui.css нагрузка правильно ? Попробуйте Google принимали библиотеку

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Если jquery-ui.css загружается должным образом, вы должны видеть стиль по умолчанию. Также убедитесь, что ваш HTML отображается в правильном формате как https://jqueryui.com/tabs/.

источник

2015-12-16 18:26:33 Ohsik

DEMO

Ваши коды работает хорошо для меня. Единственное, что я изменил это:

<script type="text/javascript"> 
$(function(){ 
    buildDocument(); 
}) 
</script>

вместо <body onload="buildDocument();"> но не является необходимым. Вы должны загрузить свой материал jqueryui с нужного URL-адреса. Взгляните на https://code.jquery.com/ui/ на всю версию.

Если вы указали информацию о jQuery, почему бы не сократить код вашей функции.

example:

function buildDocument() { 
    var tabsContainer = $('#tabs'); 
    tabsContainer.empty(); 
    var linkOne = '<li><a href="#tabs-1">One</a></li>'; 
    var linkTwo = '<li><a href="#tabs-2">One</a></li>'; 
    var t1 ='<div id="tabs-1">Tab1</div>'; 
    var t2 ='<div id="tabs-2">Tab2</div>'; 
    tabsContainer.append('<ul>'+linkOne+linkTwo+'</ul>') 
    tabsContainer.append('<div>'+t1+t2+'</div>'); 
    tabsContainer.tabs(); 
}

Вы можете также работает с массиву такие вещи, как:

var links=["tab-1","tab-2"]; 
var tabPg=["Tab1","Tab2"];

источник

2015-12-16 18:48:51 Vixed

Спасибо. Использование файлов, размещенных в Google, и изменение onload заставили его работать. –

добро пожаловать! – Vixed

Динамически создавать html для вкладок jQuery

ответ

Смежные вопросы