JQuery Tabs

Files needed
Scripts
1)jquery.min.js can be downloaded from  http://code.jquery.com/jquery-1.7.2.min.js  
2) http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js


Css
1) http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css


HTML
1)index.html

index.html

<html>

<head>

<script src="jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script>

$(document).ready(function() {

$("#tabs").tabs();

});

</script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" />

</head>

<body>

<div id="tabs">

<ul>

<li><a href="#tabs-1">Tab1</a></li>

<li><a href="#tabs-2">Tab2</a></li>

<li><a href="#tabs-3">Tab3</a></li>

</ul>

<div id="tabs-1">

<p>

This text is under tab1 div

 as you can see the content is coming when clicked tab1

</p>

</div>

<div id="tabs-2">

<p>

This text is under tab2 div

as you can see the content is coming when clicked tab2

</p>

</div>

<div id="tabs-3">

<p>

This text is under tab3 div

as you can see the content is coming when clicked tab3

</p>

<p>

This text is under tab3 div 

as you can see the content is coming when clicked tab3

</p>

</div>

</div>

</body>

</html>

LIVE DEMO