Question

我正在使用此代码创建标签：http://akrabat.com/dynamic-javascript-tabs/ 它基本上根据'tab-container'中'tab-content'div的数量创建标签。在我的项目中，我根据从XMLHttpRequest检索的数据动态创建'tab-content'div：

tabContents = getChildElementsByClassName(tabContainer, 'tab-content');
    if(tabContents.length == 0)
        return;

div正是按照我想要的方式创建的，但标签不会构建。创建选项卡的脚本此时停止：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/apitest.js"></script>
<style type="text/css" media="screen">@import "css/tabs.css";</style>
<title>Tabs and REST</title>
</head>
<body>
    <div id='tab-container'>

    </div>
    <script type="text/javascript" src="js/tabs.js"></script>
</body>
</html>

我认为它可能与ajax有关。在创建所有div之前，如何确保BuildTabs（）函数不会调用？

HTML：

{{1}}

注意：我还应该补充说getFormProperties（）函数还包含XMLHttpRequest。如果重要。

Answer 1

更改此方法;

 xhr.onload = function () { 

        var data = JSON.parse(xhr.responseText);
        var tasks = data.data;
        var aTags = document.getElementsByTagName("A");

        for(var h = 0; h < tasks.length; h++){

            var tabContainer = document.getElementById("tab-container");

            var divElement = document.createElement("div");
            divElement.className = 'tab-content';

            tabContainer.appendChild(divElement);

            var hOneElement = document.createElement("h1");
            hOneElement.className = 'tab';
            hOneElement.setAttribute('title', 'task' + h);
            hOneElement.innerHTML = tasks[h].name;

            divElement.appendChild(hOneElement);

            var formElement = document.createElement("form");
            formElement.className = 'taskForm';
            formElement.setAttribute('action', 'CompleteTask');
            formElement.setAttribute('method', 'post');

            divElement.appendChild(formElement);

            var taskId = tasks[h].id

            getFormProperties(taskId, h);

        }
       BuildTabs();
    };

JavaScript / REST - 创建制表符div元素后构建选项卡

1 个答案: