What is the top unobtrusive and lightweight jQuery solution for creating tabs? While jQuery UI offers a tab component, it might be too heavy-handed for just handling tabs. You would need to include jQuery UI core.js, jQuery UI tab.js, and then write some additional code.
I am looking for a simpler solution that uses this type of HTML structure, with the jQuery code in noConflict 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>
The tab contents should still be accessible even if JavaScript is disabled.