Tab in Jquery

Nowadays Jquery simplified the UI developer workload. Here i given tab controlled content by using jquery library. This method will help you to use multi tabs with respective contents.

<div id="uitab">
<ul>
<li><a class="sltd" href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#jscript">Javascript</a></li>
</ul>
<div id="html">
HTML is the language can be understood by all web browsers. Used to visually present the data.
<a href="#">Click here</a>
</div>
<div id="css">
CSS is used with html and xml to showcase the data in web browser.
<a href="#">Read more</a>
</div>
<div id="jscript">
Javascript is the client side running script. It can be used with all programming languages.
<a href="#">Readmore</a>
</div>
</div>

$(function (){
 var content = $('#uitab > div');
 $('#uitab li a').click(function(){
 content.slideUp('6000').filter(this.hash).slideDown('3000');
//Here slideUp and slideDown can be replaced with your animations ...
 $('#uitab li a').removeClass('sltd');
 $(this).addClass('sltd');
 return false;
 });
});

In the above code you can change the slideUp to hide slideDown to show. filter(this.hash) filters the anchor tag's href value which is clicked.By having that value we enabling the slideDown to the content which is having the same id i.e., filtered from anchor tag href. For E.g. HTML anchor tag href value is "#html" (<a href="#html">). The html tab content div id is "#html" (<div id="html">). Maintaining the same vaue to id is important. Sorry for not including the css...