Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.
here is simple jQuery tab example:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Ashishblog -jQuery Tabs</title>
<link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" >
</script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js" >
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#t1"><span>One</span></a></li>
<li><a href="#t2"><span>Two</span></a></li>
<li><a href="#t3"><span>Three</span></a></li>
</ul>
<div id="t1">
<p>First tab is active by default:</p>
</div>
<div id="t2">
<p>Second Tab</p>
</div>
<div id="t3">
<p>third tab</p>
</div>
</div>
</body>
</html>
you can use following code to change from click tabs to Mouseover tabs.
$(function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
});
Great!!!!!!! Thanks ……..
Asish-
Questions.
1) In this line:
<link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css” />
the end of the span tag terminates the link tag in several browsers we have to test (IE7, IE8, FF3). Which broswers are supported with your example code?
2) What are IL_ADx clases? These are not present in the jquiry-ui.css code.
-Jeff
Fixed…it was formatting error..