动态为jQuery标签创建HTML

Question

我正在尝试通过javascript创建几乎所有html时编写页面。 我想在我的项目中使用jQuery Tabs。 内容已创建，但未显示选项卡。 这是CSS问题吗？

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/

这就是我得到的

Answer 1

您的代码对我有用。

我的包括：

<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>

Answer 2

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/ 。

Answer 3

演示

您的代码对我有用。 我唯一更改的是：

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

而不是<body onload="buildDocument();" >但不是必需的。 您必须从正确的URL加载jqueryui内容。 查看所有版本的https://code.jquery.com/ui/ 。

如果要包含jQuery，为什么不考虑缩短函数代码。

一个例子：

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"];

动态为jQuery标签创建HTML

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-12-16 18:27:58

解决方案2
0 2015-12-16 18:26:33

解决方案3
0 2015-12-16 18:48:51

动态为jQuery标签创建HTML

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-12-16 18:27:58

解决方案2 0 2015-12-16 18:26:33

解决方案3 0 2015-12-16 18:48:51

解决方案1
1 已采纳 2015-12-16 18:27:58

解决方案2
0 2015-12-16 18:26:33

解决方案3
0 2015-12-16 18:48:51