What is the best unobtrusive and lightweight jquery solution to make tab?

Which is the best unobtrusive and lightweight jquery solution to make tab? Although Jquery similar to jquery ui. jquery ui tab is good but it's overkill fro for just tab. we will have to add jquery ui core.js, jquery ui tab.js then a little code snippet.

I need lightweight solution. using this type HTML. and jquery code should be in no.conflict mode.

<ul>
        <li><a href="#example-1">example 1</a></li>
        <li><a href="#example-2">example 2</a></li>
        <li><a href="#example-3">example 3</a></li>
</ul>
    <div id="tabs-1">
        <p>
            tab 1 content</p>
    </div>
    <div id="tabs-2">
        <p>
            tab 2 content</p>
  开发者_如何学编程  </div>
    <div id="tabs-3">
        <p>
            tab 3 content</p>
    </div>

tabs content should be accessible if js is disabled.

If changing your HTML is an option you'd be better off with going something a bit more semantic. Having semantic markup for your tabs will result in better search engine optimization and make your site more accessible to a wider range of users. That said a Semantic Tabs with jQuery is a great plugin that will work with the below markup.

<div id="mytabset">
  <div class="panel">
    <h3>Tab1</h3>
     Panel stuff 1
  </div>
  <div class="panel">
    <h3>Tab2</h3>
     Panel stuff 2
  </div>
  <div class="panel">
    <h3>Tab3</h3>
     Panel stuff 3
  </div>
</div>

Jitendra's link to Semantic Tab Box v2.0 is no longer viable. The article can still be accessed with the Wayback Machine, however.

Most recent snapshot: http://web.archive.org/web/20101022075840/http://blog.mozmonkey.com/2007/semantic-tab-box-v20/

Direct link to example source code: http://web.archive.org/web/20101022075840/http://blog.mozmonkey.com/pages/examples/tabbox2/tabbox2.zip

AccessibleTabs is a lovely unobtrusive tab implementation -- and accessible too!

Their simple example looks like this

$(document).ready(function(){
        $(".tabs").accessibleTabs({
            tabhead:'h2',
            fx:"fadeIn"
        });
});

You can configure the DOM elements that hold the tab labels and content to be anything you want.

on github here: https://github.com/ginader/Accessible-Tabs

more detail here: http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php