Introduction
This tutorial will show you how to build your own tabbed interface using jQuery. Tabbed interfaces and tabbed structure menus are becoming very popular in web design & development. Tabs are used for improving the utilization of space and to provide stylish effects in a website. jQuery tabs are very popular and create some fancy looks for web pages. I have used CSS to make a rounded style. It doesn't work for IE but its fine in Firefox and Chrome. I hope you will like this stylish and sexy tabs tutorial.
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 screen.css file to your Styles folder.
![img4.gif]()
and right-click on the screen.css file -> copy and paste it inside <Head> section of your page.
<link rel="stylesheet" type="text/css" href="Styles/screen.css" />
Step 4: In this step we 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/jquery.js"></script>
Step 6: In this step we write the jQuery code which is given below.
<script type="text/javascript">
$(document).ready(function () {
$("#first-tab").addClass('buttonHover');
});
function navigate_tabs(container, tab) {
$(".b").css('display', 'none');
$(".c").css('display', 'none');
$(".a").css('display', 'none');
$("#first-tab").removeClass('buttonHover');
$("#second-tab").removeClass('buttonHover');
$("#third-tab").removeClass('buttonHover');
$("#" + tab).addClass('buttonHover');
$("." + container).show('slow');
}
</script>
Step 7: In this step you will see the body code of the Default2.aspx page which is given below.
<body>
<form id="form1" runat="server">
<br clear="all" />
<br clear="all" />
<br clear="all" />
<div align="center">
<div id="wrap">
<a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">
MCN</a> <a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">
C#</a> <a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">
Java</a>
<br clear="all" />
<div id="body" align="center">
<div class="a">
<em>MCN</em>Hello and thank you for visiting the Mindcracker Network. The Mindcracker
Network with its global headquarters in Philadelphia, PA was founded in 1999 with a
single goal in mind - to provide an online platform for Information Technology
Developers and Information Technology Professionals to exchange their knowledge and
experience by teaching and learning from one another by using various interactive
online methods such as contributing articles, discussion forums, blogs, and videos.
<br />
<br />
Thanks!
</div>
<div class="b">
<em>C#</em>(pronounced "C-sharp") is an object-oriented programming language from
Microsoft that aims to combine the computing power of C++ with the programming ease
of Visual Basic. C# is based on C++ and contains features similar to those of Java.
</div>
<div class="c">
<em>Java</em>is a programming language and computing platform first released by
Sun Microsystems in 1995. It is the underlying technology that powers state-of-the-art
programs including utilities, games, and business applications. Java runs on more
than 850 million personal computers worldwide, and on billions of devices worldwide,
including mobile and TV devices.
</div>
</div>
</div>
</div>
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
</form>
</body>
Step 8: 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>A Simple Animated Tab Using jQuery </title>
<link rel="stylesheet" type="text/css" href="Styles/screen.css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#first-tab").addClass('buttonHover');
});
function navigate_tabs(container, tab) {
$(".b").css('display', 'none');
$(".c").css('display', 'none');
$(".a").css('display', 'none');
$("#first-tab").removeClass('buttonHover');
$("#second-tab").removeClass('buttonHover');
$("#third-tab").removeClass('buttonHover');
$("#" + tab).addClass('buttonHover');
$("." + container).show('slow');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<br clear="all" />
<br clear="all" />
<br clear="all" />
<div align="center">
<div id="wrap">
<a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">
MCN</a> <a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">
C#</a> <a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">
Java</a>
<br clear="all" />
<div id="body" align="center">
<div class="a">
<em>MCN</em>Hello and thank you for visiting the Mindcracker Network. The Mindcracker
Network with its global headquarters in Philadelphia, PA was founded in 1999 with a
single goal in mind - to provide an online platform for Information Technology
Developers and Information Technology Professionals to exchange their knowledge and
experience by teaching and learning from one another by using various interactive
online methods such as contributing articles, discussion forums, blogs, and videos.
<br />
<br />
Thanks!
</div>
<div class="b">
<em>C#</em>(pronounced "C-sharp") is an object-oriented programming language from
Microsoft that aims to combine the computing power of C++ with the programming ease
of Visual Basic. C# is based on C++ and contains features similar to those of Java.
</div>
<div class="c">
<em>Java</em>is a programming language and computing platform first released by
Sun Microsystems in 1995. It is the underlying technology that powers state-of-the-art
programs including utilities, games, and business applications. Java runs on more
than 850 million personal computers worldwide, and on billions of devices worldwide,
including mobile and TV devices.
</div>
</div>
</div>
</div>
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
</form>
</body>
</html>
Step 9: In this step we are going to run the Default2.aspx page by pressing F5.
![img6.gif]()
Step 10: In this step we are going to run the Default2.aspx page by pressing F5.
![img7.gif]()
Click on C# and see also the MouseHover effect on Tab.
![img8.gif]()
Click on Java.
![img9.gif]()
Resources