角丸タブを使ったタブボックスを作る(2ページ目)

※これ以降の説明では、過去の2記事のことを「記事A」・「記事B」と記載しています。

「記事A」→「ページ移動せずに内容を変更するタブを作る」（2008/08/02）
「記事B」→「角の丸い「タブ」を作る」（2008/08/12）

角丸タブを使ってタブボックスを作るソース

角丸タブを使ってタブボックスを作るには、記事Aでご紹介したソース中のHTML部分とスタイルシート部分の一部を、記事Bでご紹介した方法に差し替えるだけです。 JavaScriptソース自体は、記事Aでご紹介したものをそのまま使えますので、書き換える必要はありません。

まずは、HTML部分を記述しましょう。

記事Aでは、だいたい以下のような感じのHTMLを記述しました。 全体を囲むdiv要素の中に、タブそのものを列挙するp要素と、タブに対応する中身を作るdiv要素があります。

<div class="tabbox">
   <p class="tabs">
      <a href="#tab1" class="tab1" …… >タブ１</a>
      <a href="#tab2" class="tab2" …… >タブ２</a>
      <a href="#tab3" class="tab3" …… >タブ３</a>
   </p>
   <div id="tab1" class="tab">
      <p>（タブ1の中身。何でも記述できます。）</p>
   </div>
   <div id="tab2" class="tab">
      <p>（タブ2の中身。HTMLタグも記述可能。）</p>
   </div>
   <div id="tab3" class="tab">
      <p>（タブ3の中身。いくつでも追加可能。）</p>
   </div>
</div>

このうち、タブそのものを作っているp要素の中身を、記事Bでご紹介した「角丸のタブを作る」方法に差し替えます。

<div class="tabbox">
   <ul class="tabs">
      <li class="tab1"><a href="#tab1" …… >タブ１</a></li>
      <li class="tab2"><a href="#tab2" …… >タブ２</a></li>
      <li class="tab3"><a href="#tab3" …… >タブ３</a></li>
   </ul>
   <div id="tab1" class="tab">
      <p>（タブ1の中身。何でも記述できます。）</p>
   </div>
   <div id="tab2" class="tab">
      <p>（タブ2の中身。HTMLタグも記述可能。）</p>
   </div>
   <div id="tab3" class="tab">
      <p>（タブ3の中身。いくつでも追加可能。）</p>
   </div>
</div>

HTMLだけを表示すると、以下のように見えます。

次に、スタイルシート部分の一部も記事Bでご紹介した内容に差し替えます。