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