Home Ajax Jquery jQuery To Fade Effects tabs

Related Tutorials


 
 

Share on Google+Share on Google+

jQuery To Fade Effects tabs

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

jQuery To Fade Effects tabs

     

In this JQuery tutorial we will develop a program  to make Fade Effect  tabs 

Steps to develop the simple tabs .

Step 1:

 

 

 

Create a new file (fadeEffectTab.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({ fxFade: true, fxSpeed: 'slow' });

});
</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({ fxFade: true, fxSpeed: 'slow' });

 This tabs(fxSlide: true) function  having two attributes "fxFade" and "fxSpeed" if  "fxFade" set "true" then it show fading of tab content and 

"fxSpeed" is fading effect is set to "slow".

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

 

 Output:

After click on the Tab "Two" Fading Effect Show

 

Check online demo of the application

 

Learn from experts! Attend jQuery Training classes.

Advertisement

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

Discuss: jQuery To Fade Effects tabs   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:7
Alex
August 18, 2011
missing *js-files

jquery.history_remote.pack.js and jquery.history_remote.pack.js, where do i get those?
Naresh Thakur
August 27, 2011
Help

How I can set second (Two) tab as a default tab when page open?
credit loans
October 8, 2011
answer this post

The loan seem to be very useful for guys, which would like to ground their organization. As a fact, this is easy to receive a bank loan.
Peter
December 14, 2011
Tab order

Hello, I've implemented your tab script. It works fine, except that there is a slightly annoying bug: default active tab is always the last tab, instead of the first one. Jquery version I use is 1.6.4. Since I cannot see the js code of the plugin I would like to know if there is any explicit property to define which tab is going to be active. Thanks, Peter
Tim
December 30, 2011
Could you work this out?

I've implemented this (so a massive thanks to you), but when I view the page, the second tab is selected by default. There is no #T-2 in the address and I can't work out what else there would be to troubleshoot. Thanks!
parvez
February 27, 2012
to laern jquery

to learn jquery
dude
April 18, 2012
nice one

thanks for the demo!
DMCA.com