Post
Ask Question

Versatile Tab Using jQuery

Introduction

In this article I will make a versatile tab. This versatile script is used to divide long content in your page into sections, with each section viewable by clicking on a corresponding tab. It's a great way to display your content in an interactive, less overwhelming way to your visitors.

Description

This versatile script is used to divide long content in your page into sections, with each section viewable by clicking on a corresponding tab. It's a great way to display your content in an interactive, less overwhelming way to your visitors. A fully unobtrusive, CSS and HTML based script, it supports practical features such as default tab selected, persistence of the active tab (when page is reloaded), a "slideshow" mode, ability to expand/contract arbitrary DIVs on the page at the same time, and more. Modifying the CSS tabs used as part of its interface to your own is now also much simpler compared to version 1. Now it really is the ultimate Tab Content script!

Step 1: First we have to create a Web Application.

  • Go to Visual Studio 2010.
  • New--> And select the Web Application.
  • Give whatever name you want to.
  • Click OK.

img1.gif

Step 2: Secondly you have to add a new page to the website.

  • Go to the Solution Explorer.
  • Right-click on the project name.
  • Select add new item.
  • Add new web page and give it a name.
  • Click OK.

img2.gif

img3.gif

Step 3 : In this step add the tabcontent.css file to your Styles folder.

img4.gif

Right-click on the tabcontent.css file->copy and paste to the <Head> section of your page. The reference path looks like:

<link rel="stylesheet" type="text/css" href="Styles/tabcontent.css" />

 Step 4: In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code.

img5.gif

Right-click on both files respectively -> copy and paste it inside <Head> section of your page; see step 5

Step 5: Let us see the script code which you have to add inside the <script></script> tags and that will be placed either in the <head> section or the <body> section as you prefer.

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/tabcontent.js"></script>

Step 6 : This code is for the body of the Default2.aspx.

Body Code:

<body>
    <form id="form1" runat="server">
        <ul id="countrytabs" class="shadetabs">
            <li><a href="#" rel="country1" class="selected">C#</a></li>
            <li><a href="#" rel="country2">Java</a></li>
            <li><a href="#" rel="country3">SQL</a></li>
            <li><a href="#" rel="country4">HTML</a></li>
            <li><a href="http://www.c-sharpcorner.com/">C# Corner</a></li>
        </ul>
        <div style="border: 2px solid red; width: 450px; margin-bottom: 1em; padding: 10px">
            <div id="country1" class="tabcontent">
                C# (pronounced "C-sharp") is an object-oriented programming language<br />
                from Microsoft that aims to combine the computing power of C++ with <br />
                the programming ease of Visual Basic.
            </div>
            <div id="country2" class="tabcontent">
                Java is a computer programming language. It enables programmers to <br />
                write computer instructions using English based commands, instead of<br />
                 having to write in numeric codes.
            </div>
            <div id="country3" class="tabcontent">
                SQL (Structured Query Language) is a programming language designed <br/>
                for managing data in relational database management systems (RDBMS).
            </div>
            <div id="country4" class="tabcontent">
               HyperText Markup Language (HTML) is the main markup language for<br/> web pages
               HTML elements are the basic building-blocks of webpages.
            </div>
        </div>
        <script type="text/javascript">
            var countries = new ddtabcontent("countrytabs")
            countries.setpersist(true)
            countries.setselectedClassTarget("link") //"link" or "linkparent"
            countries.init()
        </script>
        <p>
            <a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration: none">
                Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a>
            <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration: none">
                Forward</a></p>
        <hr />
        <h3>
    </form>
</body>

Step 7: In this step we will see the complete code of the Default2.aspx page which is given below.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>Versatile Tab using jQuery</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="Scripts/tabcontent.js"></script>
    <link rel="stylesheet" type="text/css" href="Styles/tabcontent.css" />
</head>
<body>
    <form id="form1" runat="server">
        <ul id="countrytabs" class="shadetabs">
            <li><a href="#" rel="country1" class="selected">C#</a></li>
            <li><a href="#" rel="country2">Java</a></li>
            <li><a href="#" rel="country3">SQL</a></li>
            <li><a href="#" rel="country4">HTML</a></li>
            <li><a href="http://www.c-sharpcorner.com/">C# Corner</a></li>
        </ul>
        <div style="border: 2px solid red; width: 450px; margin-bottom: 1em; padding: 10px">
            <div id="country1" class="tabcontent">
                C# (pronounced "C-sharp") is an object-oriented programming language<br />
                from Microsoft that aims to combine the computing power of C++ with <br />
                the programming ease of Visual Basic.
            </div>
            <div id="country2" class="tabcontent">
                Java is a computer programming language. It enables programmers to <br />
                write computer instructions using English based commands, instead of<br />
                 having to write in numeric codes.
            </div>
            <div id="country3" class="tabcontent">
                SQL (Structured Query Language) is a programming language designed <br/>
                for managing data in relational database management systems (RDBMS).
            </div>
            <div id="country4" class="tabcontent">
               HyperText Markup Language (HTML) is the main markup language for<br/> web pages
               HTML elements are the basic building-blocks of webpages.
            </div>
        </div>
        <script type="text/javascript">
            var countries = new ddtabcontent("countrytabs")
            countries.setpersist(true)
            countries.setselectedClassTarget("link") //"link" or "linkparent"
            countries.init()
        </script>
        <p>
            <a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration: none">
                Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a>
            <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration: none">
                Forward</a></p>
        <hr />
        <h3>
    </form>
</body>
</html>

Step 8 : In this step we will see the design of the Default2.aspx page which is given below.

img6.gif

Step 9: In this step we are going to run the Default2.aspx page by pressing F5.

img7.gif

Now Click on every tab and see the corresponding effect.

img8.gif

img9.gif

Click on Forward.

img10.gif

Click on Back.

img11.gif

Click on "Click here to select last tab".

img11.gif

Click on "C# Corner".

img12.gif

Resources


Similar Articles