J'ai besoin d'aide pour faire des onglets à utiliser par jquery tabs plugin

Question

Je suis complètement novice en CSS et je ne peux pas me permettre de faire des onglets. Nous avons actuellement des onglets comme this Cependant, ces onglets sont faites en utilisant une mauvaise recherche <table> tag

est le code ci-dessous qui a produit l'image en lien ci-dessus

<table name="incomesummarytable" cellpadding="0" cellspacing="0" border="0" width="100%"> 
    <tr> 
    <td colspan="4"> 
     <table border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
     <td bgcolor="#990000"><img src="/eiv/images/left_curve.gif" alt="Left Curve" width="10" height="20"></td> 
     <td bgcolor="#990000"><div align="center"><font face="Verdana" size=2 color="#ffffff"><b>Summary Reports</b></font></div></td> 
     <td align="right" bgcolor="#990000"><img src="/eiv/images/right_curve.gif" alt="Right Curve" width="10" height="20"></td> 
     <td>&nbsp;</td> 
     <td bgcolor="#dddddd"><img src="/eiv/images/left_curve.gif" alt="Left Curve" width="10" height="20"></td> 
     <td bgcolor="#dddddd"><div align="center"><a href="javascript:submitData('View Detail Reports');" style='text-decoration: none;'><font face="Verdana" size=2 color="#000000"><b>Detail Reports</b></font></a></div></td> 
     <td align="right" bgcolor="#dddddd"><img src="/eiv/images/right_curve.gif" alt="Right Curve" width="10" height="20"></td> 
     <td>&nbsp;</td> 
     </tr> 
     </table> 
     </td> 

Cependant, je suis en train d'utiliser la méthode plus élégante de jquery tabs plugin. Ce plugin change les divs en onglets. J'essaie donc de savoir comment convertir les onglets que j'ai en div pour pouvoir les utiliser avec le plugin de l'onglet jquery.
J'apprécierais de l'aide qui m'aurait au moins permis de commencer.

Idéalement je voudrais le code html à être aussi simple que

<div id="container-1" bgcolor="#990000"> 
     <ul> 
      <li ><a href="#fragment-1"><span>Summary</span></a></li> 
      <li ><a href="#fragment-2"><span>Detailed</span></a></li> 
     </ul> 
     <div id="fragment-1"> 
      <p>Summary Info goes here:</p> 
     </div> 
     <div id="fragment-2"> 
      <p>Detailed Info goes here:</p> 
     </div> 
    </div> 

Mais je ne peux pas ma tête wrap CSS qui ferait cela.

Answer 1

Voir le tutoriel Sliding Doors Technique de Doug Bowman pour comprendre facilement le balisage, le CSS et le raisonnement qui le sous-tend.

A List Apart est une excellente ressource en général; Vous y trouverez également d'autres excellents articles sur la technique CSS.

Answer 2

Avez-vous jquery-ui? Il existe de bons exemples et docs sur le site jquery-ui: http://jqueryui.com/demos/tabs/.

vous vous retrouvez avec HTML qui ressemble à ceci:

<div id="tabs"> 
<ul> 
    <li><a href="#tabs-1">Text 1</a></li> 
    <li><a href="#tabs-2">Text 2</a></li> 
    <li><a href="#tabs-3">Text 3</a></li> 
</ul> 
<div id="tabs-1">Content Tab 1</div> 
<div id="tabs-2">Content Tab 2</div> 
<div id="tabs-3">Content Tab 3</div> 
</div>