jQuery Tabs

Quickly, and easily, build an accessible and unobtrusive tabbed navigation interface for your web site.

Download code Visit demo

Tags: jquery tabs

Flickr Like edit >>

JQuery Tabs demo

Changes to the code below will update the demo above in real time.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<title>Tabs - jQuery plugin for accessible, unobtrusive tabs</title>

/* Not required for Tabs, just to make this demo look better... */

body {
                font-size: 16px; /* @ EOMB */
            }
            * html body {
                font-size: 100%; /* @ IE */
            }
            body * {
                font-size: 87.5%;
                font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
            }
            body * * {
                font-size: 100%;
            }
            h1 {
                margin: 1em 0 1.5em;
                font-size: 18px;
            }
            h2 {
                margin: 2em 0 1.5em;
                font-size: 16px;
            }
            p {
                margin: 0;
            }
            pre, pre+p, p+p {
                margin: 1em 0 0;
            }
            code {
                font-family: "Courier New", Courier, monospace;
            }
        </style>
    </head>
    <body>
        
        <h2>Slide and Fade Effect Combined</h2>

<div id="container-5">
            <ul>
                <li><a href="#fragment-13"><span>One</span></a></li>
                <li><a href="#fragment-14"><span>Two</span></a></li>
                <li><a href="#fragment-15"><span>Three</span></a></li>
            </ul>
            <div id="fragment-13">
                <p>Use a combined slide and fade effect to switch tabs:</p>
                <pre><code>$(&#039;#container&#039;).tabs({ fxSlide: true, fxFade: true, fxSpeed: 'fast' });</code></pre>
            </div>
            <div id="fragment-14">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-15">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

March 21, 2011, 8:25 a.m. - hussnain: lol THis is the best tabs i ever seen thanks for sharing them :)
Aug. 6, 2011, 5:04 a.m. - shariful arefin khan: very nice & helpful.god bless u.
Aug. 24, 2011, 3:22 p.m. - suresh: it is not working in IE 9 anybody? please help me. thank you
Nov. 13, 2011, 10:11 p.m. - kenchi: I need it. Thanks a lot
Dec. 16, 2011, 3:33 p.m. - Karima Premji: i've noticed that if content within the tabs have divs then the tabs don't work. is there a workaround for this?
Dec. 22, 2011, 1:52 p.m. - أخبار الذهب: hi mate and all others interested in jquery tabs, i can confirm this script works like a charm, please use it, it will make a lot of headache go away. i used so many scripts, but i always had some kind of error, this one is working. thanks!
Jan. 14, 2012, 2:48 a.m. - Aman: it is very good..
Jan. 17, 2012, 2:50 p.m. - suresh: it is not woking in ie 9 why? how can i solve this issue in ie 9
Feb. 29, 2012, 12:59 a.m. - krishnailu: i wan't this tabs