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
July 10, 2012, 1:40 a.m. - qemren: best of best, good for ajax
July 14, 2012, 1:55 a.m. - rohan: its really nice yaar................!
July 19, 2012, 5:37 p.m. - Jason Ross: So, how do I use this? I was very excited when this showed up in my browser with the tabs I wanted, and even more excited when the first tab had the content I wanted. But when I went to the second tab it went back to your demo. Is this not for use?
Sept. 9, 2012, 1:29 p.m. - srinath: Hi, I am having 8 tabs and due to minimum width space it was showing in 2 lines, 7 in first row and next in second row.. Now, when i click on the first row tabs.. the second row tab is moving ..How can i make it appear in fixed position in second row ..when click on first row tabs... Thanks in advance
Sept. 25, 2012, 5:18 a.m. - Taffman: Really good tabbed menu, only problem i have is that tab outline does not show when using the css on my site, if I reference the css file on this site it show fine, any idea why that should be?
Oct. 31, 2012, 12:24 p.m. - eli: Thanks for great work. How we can upload new page when each tab is clicked? here is my try. I'm using a link in each tab, but I really want to upload the page when tab is clicked! <div id="container-6"> <ul> <li>< a href="#Table"><span>Table</span></ a ></li> <li>< a href="#Tree"><span>Tree</span></ a ></li> </ul> <div id="Tree">< a href="showtree.html">Tree View</ a ></div> <div id="Table">< a href="showtable.html">Table View</ a ></div> </div> and in my javascript part I have: $(function() { $ ('#container-6').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal'; }); }); any help is highly appreciated!