In this blog I explain how creates dynamic tabs using Jquery
and CSS. Before start this blog I will recommended to read article
Create Tabs
Using jQuery and CSS
1. Create Function For Dynamic Tabs:
<script type="text/javascript">
$(document).ready(function()
{
$("#tabs").tabs({
fx:{opacity:"toggle"},
}).tabs("add","#tabFourm","Fourm")
$("#tabFourm").append("This is Fourm section");
});
</script>
Above function represents that there is #tabs is main div
container. Here tabs() function contains three argument. Argument description:
1.
add : Represents
that add the new tab.
2.
#tabFourm : Represents id selector for div. This
div uses to show content for tab.
3.
Fourm : Represents display text on tab.
Here append() method uses to add
content on div.
2. Entire Code :
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="DynamicTabs.aspx.cs"
Inherits="JQueryExample.DynamicTabs"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery/js/jquery-1.8.3.js"
type="text/javascript"></script>
<script src="jquery/js/jquery-ui-1.9.2.custom.min.js"
type="text/javascript"></script>
<link href="jqueryui/css/smoothness/jquery-ui-1.9.2.custom.min.css"
rel="stylesheet"
type="text/css"
/>
<script type="text/javascript">
$(document).ready(function()
{
$("#tabs").tabs({
fx:{opacity:"toggle"},
}).tabs("add","#tabFourm","Fourm")
$("#tabFourm").append("This is Fourm section");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="tabs">
<ul>
<li><a href="#tabArticle">Article</a></li>
<li><a href="#tabBlog">Blog</a></li>
</ul>
<div id="tabArticle">
It is Article Section.
</div>
<div id="tabBlog">
It is Blog Section.
</div>
</div>
</form>
</body>
</html>
3. Output:
![dynamicTabs.PNG]()