I want to dynamically populate the tabs from an array using jquery
I want to dynamically populate the tabs from an array. please help me out.
I tried the following code but it fails to work.
how do I hardcode the values to be generated in an array??
<!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>
No comments:
Post a Comment