In this blog I explain that how to initialize the contents of a tab from the HTML return by the server.

1. Create Content

I create a web form Content.aspx to content for a tab initialization.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Content.aspx.cs" Inherits="JQueryExample.Content" %>

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

</head>

<body>

<form id="form1" runat="server">

<div>

It is blog section.

</div>

</form>

</body>

</html>

2. Create function for Initialize

<script type="text/javascript">

$(document).ready(function()

{

$("#tabs").tabs({

fx:{opacity:"toggle"},

}).tabs("url",1,"Content.aspx").tabs("load",0);

});

</script>

Above code has a inbuilt tab() function that tab() function has three argument. url is action. index 1 presents tab index means second tab will be initialize by content and Content.aspx is web form that content will be call. “laod” is a action for load content.

3. Entire Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabAjax.aspx.cs" Inherits="JQueryExample.TabAjax" %>

<!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 id="Head1" 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("url",1,"Content.aspx").tabs("load",0);

});

</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">

Blog Section

</div>

</div>

</form>

</body>

</html>

4. Output

ajaxtab.PNG

Here uses css and jquery/js file form article Create Tabs Using jQuery and CSS