Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

54 lines (42 sloc) 1.265 kb

jQuery.tabbed() navigation

jQuery.tabbed() navigation is a light-weight jQuery plugin for handling tabbed navigation with minimal markup.

Demo

http://chovy.us.to/jquery/tabbed-navigation/

Usage

<head>
    <link href="jquery.tabbed.css" rel="stylesheet" type="text/css" media="screen" />
    <!--[if IE]>
        <link href="jquery.tabbed.ie.css" rel="stylesheet" type="text/css" media="screen" />
    <![endif]-->

</head>
...
<div class="tabbed">
    <ul class="tabs">
        <li><a href="#foo">Foo</a></li>
        <li><a href="ajax/content.php?tab=bar">Bar</a></li>
        <li><a href="#baz">Baz</a></li>
    </ul>
    <div class="contents">
        <div class="content" id="foo">Foo content</div>
        <div class="content" id="bar"></div>
        <div class="content" id="baz">Baz content</div>
    </div>
</div>
...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.tabbed.js"></script>
<script>
$(function(){
    $(".tabbed").tabbed();
});
</script>

Paste the above code in your document.

Download

git clone git@github.com:chovy/tabbed-navigation.git

Requirements

jQuery http://jquery.com (tested with jQuery 1.4, 1.6.2, 1.7.1, Firefox 10, Safari 5.1, Chrome 17, Opera 11, IE 7/8/9)

Jump to Line
Something went wrong with that request. Please try again.