jquery tabsプラグインでタブを使用するのに役立つ必要があります

Question

私はCSSを完全に新しくしています。我々は現在、私はよりエレガントな方法を使用しようとしています、

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

しかし上記のリンクで画像を生成するコードが<table>タグの下

をされて見ているが、これらのタブが悪いを使用して作られていthisのようなタブがありjquery tabsプラグインのこのプラグインは、divのタブを変更します。だから私はどのようにjqueryのタブプラグインでそれらを使用することができるようにdivに私は持っているタブを変換する方法を見つけることを試みています。
私はこれを少なくとも始めることになるいくつかの助けに感謝します。

理想的には私は、HTMLが

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

のように単純になりたいしかし、私はこれを行うだろうCSSのまわりで私の頭をラップ傾けます。

Answer 1

マークアップ、CSS、その背後にある理由を理解しやすいDoug BowmanのSliding Doors Techniqueチュートリアルを参照してください。

Aリストは、一般的に素晴らしいリソースです。他にも素晴らしいCSSテクニックの記事があります。

Answer 2

jquery-uiをチェックしましたか？ jquery-uiサイトには良い例とドキュメントがあります： http://jqueryui.com/demos/tabs/。

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