1

我想从数组中动态填充选项卡。请帮帮我。我尝试了以下代码,但它无法正常工作。

如何硬编码要在数组中生成的值?

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<title>Dynamic Population</title>

<script>
$(document).ready(function() {
    $("div#tabs").tabs();

    $("button#add-tab").click(function() {

        var num_tabs = $("div#tabs ul li").length + 1;

        $("div#tabs ul").append(
            "<li><a href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
        );
$("div#tabs").append(
            "<div id='tab" + num_tabs + "'>#" + num_tabs + "</div>"
        );
        $("div#tabs").tabs("refresh");
    });                    
});
</script>
</head>
<body>
<div id='tabs'>
    <ul>
        <li><a href='#tab1'>#1</a></li>
    </ul>
    <div id='tab1'></div>
</div>
<button id='add-tab'>Add tab</button>
</body>
</html>

现在我希望将此数组值生成为选项卡。

    <script>
    var i;
    var mycars = new Array();
    mycars[0] = "Saab";
    mycars[1] = "Volvo";
    mycars[2] = "BMW";

    for (i=0;i<mycars.length;i++)
    {
//here I need it as tabs, the code
    document.write(mycars[i] + "<br>");
    }
    </script>
4

1 回答 1

3

您在页面中缺少 jqueryui 库

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>

演示:Plunker

于 2013-08-20T04:51:58.130 回答