Step 5: In this step you will see the body code of the Default2.aspx page which is given below.
Code
<body>
<div id="container">
<ul class="menu">
<li id="news" class="active">News</li>
<li id="tutorials">Tutorials</li>
<li id="links">Links</li>
</ul>
<span class="clear"></span>
<div class="content news">
<h1>Latest News</h1>
<ul>
<li><img src="images/arrow.gif" alt="-" /> Facebook offers Rs 1.34 cr package to engineering student</li>
<li><img src="images/arrow.gif" alt="-" /> Infosys, TCS, Sify bag Department of Post projects</li>
<li><img src="images/arrow.gif" alt="-" /> Google Maps Now Includes Real-Time Traffic Data</li>
<li><img src="images/arrow.gif" alt="-" /> 10 Resume Tips for Technology Professionals </li>
<ul>
</div>
<div class="content tutorials">
<h1>Latest Tutorials</h1>
<ul>
<li><img src="images/arrow.gif" alt="-" /> Rotate an Image Via Code in Windows Phone 7</li>
<li><img src="images/arrow.gif" alt="-" />File Accessing in Windows 8 Metro Style Apps</li>
<li><img src="images/arrow.gif" alt="-" /> Canvas Shape Tango Animation Using HTML 5</li>
<li><img src="images/arrow.gif" alt="-" /> How to Turn on System Protection in Windows 8</li>
<li><img src="images/arrow.gif" alt="-" /> Getting Started With Windows Phone 7</li>
<li><img src="images/arrow.gif" alt="-" /> Working With Calendar in Window Phone 7</li>
<ul>
</div>
<div class="content links">
<h1>You may visit</h1>
<ul>
<li><img src="images/arrow.gif" alt="-" /> <a href="http://www.c-sharpcorner.com"/>http://www.c-sharpcorner.com/ </a> - C#Corner.com!</li>
<li><img src="images/arrow.gif" alt="-" /> <a href="http://www.dbtalks.com/">http://www.dbtalks.com/ </a> - D B Talks</li>
<li><img src="images/arrow.gif" alt="-" /> <a href="http://www.dotnetheaven.com/"> http://www.dotnetheaven.com/ </a> - .Net Heaven ;)</li>
<li><img src="images/arrow.gif" alt="-" /> <a href="http://www.interviewcorner.com//">http://www.interviewcorner.com//</a> - Interview Corner</li>
<ul>
</div>
</div>
</body>
Step 6: 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 Smooth Tabbed Menu Using jQuery </title>
<link href="Styles/general.css" rel="stylesheet" type="text/css" media="screen" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/tabs.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<ul class="menu">
<li id="news" class="active">News</li>
<li id="tutorials">Tutorials</li>
<li id="links">Links</li>
</ul>
<span class="clear"></span>
<div class="content news">
<h1>Latest News</h1>
<ul>
<li><img src="images/arrow.gif" alt="-" /> Facebook offers Rs 1.34 cr package to engineering student</li>
<li><img src="images/arrow.gif" alt="-" /> Infosys, TCS, Sify bag Department of Post projects</li>
<li><img src="images/arrow.gif" alt="-" /> Google Maps Now Includes Real-Time Traffic Data</li>
<li><img src="images/arrow.gif" alt="-" /> 10 Resume Tips for Technology Professionals </li>
<ul>
</div>
<div class="content tutorials">
<h1>Latest Tutorials</h1>
<ul>
<li><img src="images/arrow.gif" alt="-" /> Rotate an Image Via Code in Windows Phone 7</li>
<li><img src="images/arrow.gif" alt="-" />File Accessing in Windows 8 Metro Style Apps</li>
<li><img src="images/arrow.gif" alt="-" /> Canvas Shape Tango Animation Using HTML 5</li>
<li><img src="images/arrow.gif" alt="-" /> How to Turn on System Protection in Windows 8</li>
<li><img src="images/arrow.gif" alt="-" /> Getting Started With Windows Phone 7</li>
<li><img src="images/arrow.gif" alt="-" /> Working With Calendar in Window Phone 7</li>
<ul>
</div>
<div class="content links">
<h1>You may visit</h1>
<ul>
<li><img src="images/arrow.gif" alt="-" /> <a href="http://www.c-sharpcorner.com"/>http://www.c-sharpcorner.com/ </a> - C#Corner.com!</li>
<li><img src="images/arrow.gif" alt="-" /> <a href="http://www.dbtalks.com/">http://www.dbtalks.com/ </a> - D B Talks</li>
<li><img src="images/arrow.gif" alt="-" /> <a href="http://www.dotnetheaven.com/"> http://www.dotnetheaven.com/ </a> - .Net Heaven ;)</li>
<li><img src="images/arrow.gif" alt="-" /> <a href="http://www.interviewcorner.com//">http://www.interviewcorner.com//</a> - Interview Corner</li>
<ul>
</div>
</div>
</body>
</html>
Step 7: In this step we will see the design of the Default2.aspx page which is given below.
![img5.jpg]()
Step 8: In this step we are going to run the Default2.aspx page by pressing F5.
![img6.jpg]()
Now click on next tab to see the effect.
![img7.jpg]()
![img8.jpg]()
Resources