Reader Level:
Articles

Create Tabs Using jQuery and CSS

By Sandeep Singh Shekhawat on December 08, 2012
In this article I am explaining how can create tabs using jQuery scripts and CSS.
  • 0
  • 0
  • 8414
Download Files:
 

Here you will see how to create tabs using jQuery scripts and CSS.

  1. 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
     
  2. 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>
     
  3. 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
    >
     
  4. 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
    >
     
  5. 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>
     
  6. Output

Tabs-In-jQuery2.gif

COMMENT USING

Trending up