タブの切替 | よく使うjQuery（画像編）

昨年紹介した「タブの切替 | よく使うjQuery」のコメントで、タブを画像にしたいとの要望が多かったのでサンプルを作成しました。

jqueryによるタブ切替(画像編)

javascriptは以前紹介したサンプルのままで流用できます。
過去記事のソースを流用するので過去記事参照の上、今回の記事をご確認下さい。
過去記事はこちら
今回はhtmlとCSSのみ修正になります。

■html

<ul id="tab">
<li class="select"><span>タブ1</span></li>
<li><span>タブ2タブ2</span></li>
<li><span>タブ3タブ3タブ3</span></li>
<li><span>タブ4タブ4タブ4タブ4</span></li>
</ul>

■css

#tab li {
  float: left;
  padding-left: 3px;
  list-style: none;
  cursor: pointer;
  background: url(images/bg_tab_left_off.png) no-repeat;
}
#tab li span {
  display: inline-block;
  padding: 10px 10px 10px 7px;
  height: 20px;
  background: url(images/bg_tab_right_off.png) no-repeat right;
}
#tab li.select {
  color: #fff;
  background: url(images/bg_tab_left_on.png) no-repeat;
}
#tab li.select span {
  background: url(images/bg_tab_right_on.png) no-repeat right;
}

解説

今回はタブの背景に画像を設定し、タブの名称（文字数）によって横幅が可変になるようにしました。
背景画像は2種類×マウスオーバー時の2種類で計4つ用意します。

①タブの左
②タブの右
③タブの左（マウスオーバー時）
④タブの右（マウスオーバー時）

htmlですが、過去記事からの変更点はspanで囲ったくらいですので説明は割愛し、早速CSSの解説に進みます。
まず、li要素に対して上記①の画像を背景に設定します。その際のポイントとして画像幅分のpadding-leftを設定します。①の画像は横幅が3pxなのでpadding-leftで3px設定します。

#tab li {
  float: left;
  padding-left: 3px;
  list-style: none;
  cursor: pointer;
  background: url(images/bg_tab_left_off.png) no-repeat;
}

続いてliタグで内に追加したspanタグに以下のスタイルを追加します。
paddingの最後の数値（左の余白）が7pxなのは、上記でliタグに設定したpadding-leftの3px分を引いた為です。
spanタグには背景に②の画像を設定します。
ポイントとして位置指定をrightにすることです。

#tab li span {
  display: inline-block;
  padding: 10px 10px 10px 7px;
  height: 20px;
  background: url(images/bg_tab_right_off.png) no-repeat right;
}

ここまででタブの画像化は半分完了です。
次はタブ選択時の背景画像設定です。
liタグにクラス「select」が設定されている場合は、liタグとspanタグの背景画像を変更します。

#tab li.select {
  color: #fff;
  background: url(images/bg_tab_left_on.png) no-repeat;
}
#tab li.select span {
  background: url(images/bg_tab_right_on.png) no-repeat right;
}