Quelle est la meilleure solution jquery discrète et légère pour faire un onglet?

Question

Quelle est la meilleure solution jquery discrète et légère pour faire un onglet? Bien que Jquery similaire à jquery ui. jquery ui onglet est bon, mais il est trop cher pour juste un onglet. nous devrons ajouter jquery ui core.js, jquery ui tab.js puis un petit extrait de code.

J'ai besoin d'une solution légère. en utilisant ce type HTML. et Le code jquery doit être en mode no.conflict.

<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> 

Le contenu des onglets devrait être accessible si js est désactivé.

Answer 1

Si le changement de votre HTML est une option, vous feriez mieux d'aller quelque chose d'un peu plus sémantique. Avoir un balisage sémantique pour vos onglets se traduira par une meilleure optimisation des moteurs de recherche et rendra votre site plus accessible à un plus large éventail d'utilisateurs. Cela dit un Semantic Tabs with jQuery est un excellent plugin qui fonctionnera avec le balisage ci-dessous.

<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> 

Answer 2

Le lien de Jitendra vers la boîte à onglets sémantique v2.0 n'est plus viable. L'article peut encore être consulté avec la Wayback Machine, cependant.

instantané le plus récent: http://web.archive.org/web/20101022075840/http://blog.mozmonkey.com/2007/semantic-tab-box-v20/

Lien direct vers un exemple de code source: http://web.archive.org/web/20101022075840/http://blog.mozmonkey.com/pages/examples/tabbox2/tabbox2.zip

Answer 3

AccessibleTabs est une belle mise en œuvre de l'onglet discret - et accessible aussi!

Leur exemple simple ressemble à ceci

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

Vous pouvez configurer les éléments DOM qui maintiennent les étiquettes des onglets et le contenu d'être tout ce que vous voulez.

sur github ici: https://github.com/ginader/Accessible-Tabs

plus en détail ici: http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php