タブ ページ ウェブレットでCSSを使用

タブ・ページ・ウェブレットでCSSを使用

省略値CSSの機能

独自のCSSスタイルを追加

タブ・ページ・ウェブレットはHTMLテーブルを使用して構成されています。またタブ自体は順不同のリストを使用して構成されています。タブ・ページeのHTMLは次のような感じになります。

<table id="TabPagesName" class="std_tab_pages" cellpadding="0" cellspacing="0">

   <tbody>

      <tr>

         <td class="std_tab_pages_top_tabs">

            <ul class="std_tab_pages_tabs">

               <li class="std_tab_active">

                  <a onclick="return stdTabPagesTabClicked(this, 1)">Organisation</a>

               </li>

               <li>

                  <a onclick="return stdTabPagesTabClicked(this, 2)">Contact</a>

               </li>

               <li>

                  <a onclick="return stdTabPagesTabClicked(this, 3)">Employment</a>

               </li>

            </ul>

         </td>

      </tr>

      <tr>

         <td class="std_tab_pages_content_wrapper">

            <div class="std_tab_pages_content">

               Tab 1 Content

            </div>

            <div class="std_tab_pages_content" style="display:none">

               Tab 2 Content

            </div>

            <div class="std_tab_pages_content" style="display:none">

               Tab 3 Content

            </div>

 

           </td>

      </tr>

   </tbody>

</table>