En utilisant jQuery UI onglets avec une mise en page personnalisée HTML

Question

Le balisage requis par jQuery UI onglets est comme suit ...

<ul> 
    <li>Tab1</li> 
    <li>Tab2</li> 
    <li>Tab3</li> 
</ul> 
<div> 
    Panel 1 
</div> 
<div> 
    Panel 2 
</div> 
<div> 
    Panel 3 
</div> 

qui est assez bon dans certains cas, mais dans d'autres cas où SEO et l'utilisation sont les principales priorités, ce balisage n'est pas le meilleur. Je voudrais travailler jQuery UI Tabs avec le balisage suivant ...

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

Est-ce possible?

J'ai trouvé ici (http://christianyates.com/blog/semantic-tabs/semantic-tabs-jquery) un autre plugin qui résout ce problème, mais j'utiliserais le plugin jQuery UI Tabs.

Answer 1

Ce n'est pas disponible pour le moment avec les onglets de l'interface utilisateur jQuery. sur les forums jQuery le statut sur une telle demande est « nous allons y réfléchir » (ref: http://forum.jquery.com/topic/new-markup-structure-for-tabs)

La même personne a suggéré les modifications suivantes: http://fittopage.org/2010/05/tabs-done-right/

Answer 2

Je recommande le style JQuery UI. C'est moins compliqué et moins codé. Probablement, il ne serait pas revenir en arrière avec SEO.