Here you will see how to create tabs using jQuery scripts and CSS.
- Add CSS and JavaScript file references:
I need to add a CSS and jQuery reference to create a tab on a page. These files are downloaded from http://jqueryui.com/.
<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" />
The following figure shows the directory structure for all files:
![Tabs-In-jQuery1.gif]()
- Create Tab:
I use an unordered list to create tabs. The unordered list items are hyperlinks (anchor tag). These anchors have references of div using their id (in other words with a #). See:
<ul>
<li><a href="#tabArticle">Article</a></li>
<li><a href="#tabBlog">Blog</a></li>
</ul>
- Content For Tabs:
I have two div elements. These div elements are used for the content of each tab. For example the "Article" tab shows the div "tabArticle" content.
<div id="tabArticle">
It is Article Section.
</div>
<div id="tabBlog">
It is Blog Section.
</div>
- Use tabs() Function:
I use the tabs() method to create tabs and we get the id of the div that has all the content. Using the div id apply the tabs() function to create the tab. Here the ready() function is used to create the tabs on document load. See:
<script type = "text/javascript">
$(document).ready(function ()
{
$("#tabs").tabs();
});
</script>
- Entire Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabExample.aspx.cs" Inherits="jQueryExample.TabExample" %>
<!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();
});
</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>
- Output
![Tabs-In-jQuery2.gif]()