нужна помощь в создании вкладок для использования плагином jquery tabs

Question

Я совершенно новичок в CSS и не могу обойтись без создания вкладок. В настоящее время у нас есть вкладки, такие как this Однако эти вкладки сделаны с использованием плохо выглядящего тега <table>

Ниже приведен код, который произвел изображение по ссылке выше

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

Однако я пытаюсь использовать более элегантный метод плагина jquery . Этот плагин меняет div на вкладки. Поэтому я пытаюсь выяснить, как преобразовать имеющиеся у меня вкладки в div, чтобы я мог использовать их с плагином jquery tab.
Я был бы признателен за помощь, которая, по крайней мере, поможет мне в этом.

В идеале я бы хотел, чтобы 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

Вы проверяли jquery-ui? На сайте jquery-ui есть хорошие примеры и документы: http://jqueryui.com/demos/tabs/.

Вы получите HTML, который выглядит примерно так:

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

Answer 2

См. Учебник Дуга Боумена по технике для раздвижных дверей , чтобы легко понять разметку, CSS и обоснование этого.

A List Apart - отличный ресурс в целом; там вы найдете и другие замечательные статьи о технике CSS.