jquery tabs plugin에서 사용할 탭을 만드는 데 도움이 필요합니다.

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의 탭을 변경합니다. 그래서 저는 div에있는 탭을 jquery tab plugin과 함께 사용할 수 있도록 변환하는 방법을 찾으려고합니다.
적어도이 일을 시작하게 도와 줄 수있는 도움을 주시면 감사하겠습니다.

은 이상적으로는 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 자습서를 참조하십시오.

목록 비공개 목록은 일반적으로 훌륭한 자료입니다. 거기에는 다른 훌륭한 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>