需要帮助制作标签以供 jquery 标签插件使用答案

【问题标题】：need help making tabs to be used by jquery tabs plugin需要帮助制作标签以供 jquery 标签插件使用
【发布时间】：2009-05-15 18:12:27
【问题描述】：

我对 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 tabs 插件的更优雅的方法。此插件将 div 更改为选项卡。所以我试图找出如何将我拥有的选项卡转换为 div，以便我可以将它们与 jquery 选项卡插件一起使用。
我会很感激一些帮助，至少能让我开始做这件事。

理想情况下，我希望 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。

【问题讨论】：

确保您使用的是当前版本的 jQuery UI。不再支持您链接的版本！

标签： jquery css tabs

【解决方案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>

【讨论】：

【解决方案2】：

请参阅 Doug Bowman 的 Sliding Doors Technique 教程，了解标记、CSS 及其背后的原因。

一般来说，List Apart 是一个很好的资源；您还可以在那里找到其他出色的 CSS 技术文章。

【讨论】：