Easiest jQuery Tab Example

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" >
<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 type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js" >
<script type="text/javascript">
    $(document).ready(function () {
     <div id="tabs">
        <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>
    <div id="t1">
        <p>First tab is active by default:</p>
    <div id="t2">
       <p>Second Tab</p>
    <div id="t3">
       <p>third tab</p>

you can use following code to change from click tabs to Mouseover tabs.

	$(function() {
    $( "#tabs" ).tabs({
        event: "mouseover"

3 responses to “Easiest jQuery Tab Example”

Leave a Reply