HTML 5 + JQUERY CONTROLS
ARTICLE

Create Tabs Using jQuery and CSS

Posted by Sandeep Singh Shekhawat Articles | JQuery December 08, 2012
Tags: .NET, CSS and jQuery, jQuery and CSS Tab, jQuery tabs, Tabs using jQuery
In this article I am explaining how can create tabs using jQuery scripts and CSS.
Reader Level:
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

Login to add your contents and source code to this article
This Feature is Sponsored By DynamicPDF Merger is a developers dream for interacting with any existing PDF documents. Merge, append, split, form fill, flatten stamp and so much more.
comments
COMMENT USING
PREMIUM SPONSORS
Infragistics is experts in technology and design, and passionate about helping you build highly performant and stylish applications that solve problems, deliver inspiration, and maximize results.
TRENDING UP
MOST LIKED ARTICLE
HOT KEYWORDS
SPONSORED BY
Nevron Diagram
WHITEPAPERS AND BOOKS
Hosted By CBeyond Cloud Services MVPs MOST VIEWEDLEGENDSNOW PRIZESAWARDSREVIEWSSURVEYCERTIFICATIONSDOWNLOADS
PRIVACY POLICY | TERMS & CONDITIONS | SITEMAP | CONTACT US | ABOUT US | REPORT ABUSE
©2013 C# Corner. All contents are copyright of their authors.