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

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

昨年紹介した「タブの切替 | よく使う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;
}



10 thoughts on “タブの切替 | よく使うjQuery（画像編）”

  1. こんにちは。タブの作り方を検索してこちらにたどり着きました。
    厚かましい質問で申し訳ないのですが、会社のHP作成を担当することになり、もともと基本的なHTMLしか知らないので困っています。

    イメージ画像の下にタブメニューを配置して、各タブをクリックすると下のコンテンツだけではなく、メニューの上に配置したイメージ画像も変更する。

    ということを実現したいです。

    こちらのスクリプトを少し変更すれば実現可能ですか？
    教えていただけるととても助かります。。
    どうぞよろしくお願い致します。

    返信

    1. 閲覧ありがとうございます。

      > イメージ画像の下にタブメニューを配置して、各タブをクリックすると下の
      > コンテンツだけではなく、メニューの上に配置したイメージ画像も変更する。
      こちらもちろん可能です。

      イメージとしてはタブメニュー上部の画像全てにclass（仮に「pic」とします）を設定し、後はコンテンツと同じ要領で制御します。
      試してませんが以下でうまくいくはずです。

      ■HTML

      <div class="pic">写真1</div>
<div class="pic disnon">写真2</div>
<div class="pic disnon">写真3</div>
<div class="pic disnon">写真4</div>

      ■javascript

      $(function() {
	$("#tab li").click(function() {
		var num = $("#tab li").index(this);
		$(".content_wrap").addClass('disnon');
		$(".content_wrap").eq(num).removeClass('disnon');
		$(".pic").addClass('disnon');
		$(".pic").eq(num).removeClass('disnon');
		$("#tab li").removeClass('select');
		$(this).addClass('select')
	});
});
      返信

  2. はじめまして。こちらの記事を参考にタブメニューを実装したのですが、同一ページに２カ所タブメニューを使いたく設定をしましたら下段のタブメニューを押すと上段のタブメニューが閉じてしまう（要素を確認したら中身は見えたので消えたわけではない）現象が起こってしまい、何とか解消したいと思っています。
    cssで高さを指定し直したりしたのですがなおらないのでjquery側で直すしかないかと思いコメントしました。
    大変ご面倒おかけしますがご教授いただけますと幸いです。。

    返信

    1. 閲覧ありがとうございます。

      恐らく2箇所目のタブメニューのid名等が1箇所目と同じなのではないでしょうか？
      作成されたソースを見せて頂ければより具体的な指摘が行えます。

      返信

  3. 早速にご回答いただきましてありがとうございます。
    おっしゃるとおりidが重複しておりましたのでidを分けましたら無事に表示されました！
    とても助かりました。ありがとうございます！

    返信

  5. こんにちは
    タブ切り替え使わせていただいています。
    http://www.hcpt.jp/_swim/sys/00_login.html
    デモユーザーで入っていただいて、名前をクリックすると入力画面が開きます。
    そこで使わせていただいています。
    MACで開発しているのです。サファリでは問題ありません。

    IE10で、localのサーバーから動かした時は問題ないのですが、サーバーにアップした時にタブで切り替えると画面が白くなってしまいます。
    マウスをコンテンツ（白くなっている画面）の上を動かすとマウスの軌道上のdivが表れます。

    何かリドローを行うような一文を入れればいいようなきがするのですがまだ分かっていません。
    ちなみに、ファイヤーフォックスでは起こらないです。

    もし、このような現象が起こっているようでしたらご教授願えますと幸いです。

    返信

    1. 閲覧ありがとうございます。

      検証していませんが、ご回答させて頂きます。
      IE10で動作がおかしいとのことですが、そういった場合jQueryのバージョンを上げてみてはいかがでしょうか？
      ついでにclick()をon()に書き換えとくとよいかもしれません。

      返信

  6. こんにちは。
    タブ切り替えを制作するにあたり、参考にさせていただきました。
    このたび、タブ（４つの画像）をそれぞれ色分けし、selectした際の画像もそれぞれのタブで違う画像を使用するように変更することになりました。
    どうしてもselect時の画像の切り替えがうまく出来ず、質問させていただきます。
    使用する画像は「offの画像」「onとactive時の画像」「hover時の画像」がそれぞれのタブ用にあり、合計１２枚の画像を使用します。
    HTMLでliにclasssを追加し、
    xxxx
    xxxx
    xxxx
    xxxx
    とし、cssで（.tab1、.tab2、.tab3、.tab4）にそれぞれbackgroundに画像を入れ、hover時とactive時に画像の切り替えを指定しました。これはうまく行くのですが、
    select時の画像がどうしてもうまく切り替えできません。
    （spanに別クラスを入れて画像指定をしてみましたが、ダメでした）
    ご教授して頂けるとたいへんありがたいです。よろしくお願いいたします。

    返信

    1. 閲覧ありがとうございます。

      select時の指定を行った後にhoverが働いてしまって解除されているのではないでしょうか？
      サンプルソースを見せて頂ければより具体的にわかるかと思います。

      返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です