<title>Adding jQuery Tabs Dynamicallyitle>
<link href="http://<br mode=" hold=" />code.jquery.com/ui/1.9.0/<br mode=" rel="Stylesheet" type="text/<br mode=" /> <script type="text/<br mode=" hold=" />javascript" src="http://<br mode="></script>
<script type="text/<br mode=" hold=" />javascript" src="http://<br mode="></script>
<script type="text/<br mode=" hold=" />javascript">
$(function () {
$("#divTabs")
.tabs();
});
var tabCounter = 2; //2 tabs appear by default in this example.
function AddNewTab
(newTabName) {
tabCounter++;
var divTabs =
$("#divTabs");
var ul = $("#
ulTabs");
var contentDivId = "divTab" + tabCounter;
var sampleContent = "<p>Sample content for the " + newTabName + " tab.>";
/
*** "Destroy" current tab widget temporarily.
(...re-initialized later)
***/
divTabs.tabs
("destroy");
/
*** Add the new LI element for the tab, and point it to the content's id. ***/
ul.html
(ul.html()
+ "<li><a href="#<br mode="hold" />" + contentDivId + "">" + newTabName + "></a></li>");
/
*** Add the content that the new tab points to. ***/
divTabs.html
(divTabs.html()
+ "<div id="" + contentDivId + "">" + sampleContent + "iv>");
/*** Re-
initialize the tab widget, and make the new tab the "active" one. ***/
divTabs.tabs
({ active: (tabCounter - 1)
});
}
</div></p></script>
Adding jQuery Tabs Dynamically1>
Enter a Tab Name and click the button to create a new tab.>
New Tab Name:abel>
>
Create Tab
Sample content for Tab 1.>
Sample content for Tab 2.>
This could work