2013-08-20 41 views
1

我想動態地填充數組中的選項卡。請幫助我。我試過下面的代碼,但它無法工作。我想使用jQuery動態填充數組中的選項卡

我該如何硬編碼在數組中生成的值?

<!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> 
+0

如果你在你的元素的ID,你不應該需要在您的jQuery選擇指定元素類型,所以你應該使用'$('#tabs')' –

回答

2

你缺少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

+0

這是唯一的原因嗎? –

+0

請使用相關協議。 –

+0

哦,謝謝......我錯過了圖書館! – Rohini