Home Ajax Jquery jQuery To Custom tabs
Questions:Ask|Latest

 
 

Share on Google+Share on Google+

jQuery To Custom tabs

Advertisement
In this JQuery tutorial we will develop a program to make Custom tabs

jQuery To Custom tabs

     

In this JQuery tutorial we will develop a program  to make Custom  tabs. Custom tabs can be very useful and saves space on the web page. It helps the programmers and page designers to place lot of information on the website, making the website very useful.

You can also display the dynamic content in the tabs.

Steps to develop the simple tabs .

Step 1:

 

 

 

Create a new file (customTab.html) and add the following code into it:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Tabs</title>

<script src="script/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="script/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="script/jquery.tabs.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {

$('#div-1').tabs(3);

});
</script>

<link rel="stylesheet" href="style/tab.css" type="text/css" media="print, projection, screen">


</head>
<body>


<h2>Simple Tabs</h2>

<div id="div-1">
<ul>
<li><a href="#T-1"><span>One</span></a></li>
<li><a href="#T-2"><span>Two</span></a></li>
<li><a href="#T-3"><span>Three</span></a></li>
</ul>
<div id="T-1">
<p>First tab</p>

</div>
<div id="T-2">
Second Tab
</div>
<div id="T-3">
Third Tab
</div>
</div>



</body>
</html>

Program explanation:

The following code includes the jQuery JavaScript library file:

<script src="script/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="script/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="script/jquery.tabs.pack.js" type="text/javascript"></script>

The Style Css library file

<link rel="stylesheet" href="style/tab.css" type="text/css" media="print, projection, screen">:

The Code

$('#div-1').tabs()

 This tabs(3) function  having argument "3" it defaults set the "Tab 3" .

"div-1" having fragments id "T-1","T-2","T-3" is working.

 

 Output:

 

Check online demo of the application

Learn from experts! Attend jQuery Training classes.

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: September 8, 2008

Related Tutorials

Ask Questions?    Discuss: jQuery To Custom tabs   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
mortgage loans
October 8, 2011
answer this topic

When you're in a not good position and have no money to go out from that, you would have to take the business loans. Because that would aid you definitely. I get car loan every single year and feel myself good because of this.
DMCA.com