为 jQuery 选项卡动态创建 html答案

【问题标题】：Dynamically create html for jQuery tabs为 jQuery 选项卡动态创建 html
【发布时间】：2015-12-17 03:00:56
【问题描述】：

我正在尝试编写一个页面，同时通过 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/

This is what I get

【问题讨论】：

如果您右键单击您的页面并选择“查看源代码”，然后尝试单击 jquery-ui.css 并向我们显示响应....或在开发工具中，在网络选项卡，重新加载您的网站并查看您的脚本是否未加载...

标签： javascript jquery html css jquery-ui

【解决方案1】：

你的代码对我有用。

我的包括：

【解决方案2】：

DEMO

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

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

而不是<body onload="buildDocument();"> 但不是必需的。您必须从正确的 url 加载您的 jqueryui 内容。查看所有版本的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"];

【讨论】：

谢谢。使用 google 托管的文件并更改 onload 使其工作。

【解决方案3】：

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

【讨论】：