【jQuery】タブ切り替えできる商品一覧をつくる【コピペOK】

投稿日 2019年4月25日
更新日 2021年4月21日
著者のせっち
カテゴリープログラミング

こんにちはのせっち@nosecchi01です。

CSS, jQueryで簡単にできるタブ切り替えを紹介します。コピペでそのまま実装できます。

アパレルサイトにあるような、商品があり、サムネイルをクリックすると別アングルに切り替わるようなメニューを想定して作りました。

プラグインを使わず、jQueryだけで簡単に実装できるのでオススメです。

こちらのブログでは簡易的にボックスで作っていますが、ボックスの部分を写真に切り替えればOKです。

目標物の確認

早速Code Pen（コードペン）見てみましょう。

See the Pen タブ切り替え(thumbnail) by Yuki Nose (@yukinouz1) on CodePen.

右側のResult欄をスクロールすると、三つの四角い箱が出てきます。

試しにオレンジや赤の箱を押してみると、ボックスの色が変わります。

簡単に解説

<HTML>

<div class="wrapper flex">
<ul class="main">
  <li class="box box1"></li>
  <li class="box box2 hide"></li>
  <li class="box box3 hide"></li>
</ul>
  <ul class="thumbnail flex">
    <li class="box1 select"></li>
    <li class="box2"></li>
    <li class="box3"></li>
  </ul>
</div>

<CSS>

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.flex{
  display: flex;
}

ul{
  list-style: none;
}
.box{
  width: 300px;
  height: 300px;
  background: #eaeaea;
  margin-bottom: 20px;
}

.box1{
  background: #eaeaea;
}
.box2{
  background: #ffbf7f;
}
.box3{
  background: #ff7f7f;
}

.thumbnail li{
  width: 50px;
  height: 50px;
  margin-right: 15px;
}

.thumbnail li:last-child{
  margin-right: 0;
}

.thumbnail li.select{
  border: 2px solid #7fbfff;
}

.hide{
  display: none;
}

・mainが上の大きい箱、.thumbnailが下に3つ並んでいる小さい箱です。
・hideクラスで(display: none;)2つめと3つめのボックスを隠しています。
・selectがついているクラスで選択中のサムネイルに青色の縁取りがつくようになっています。

単純なHTML, CSSですね。

続いてjQueryです。

jQuery(function($) {
  //クリックしたときのファンクションをまとめて指定
  $(".thumbnail li").on("click",function() {
    //.index()を使いクリックされたタブが何番目かを調べ、
    //indexという変数に代入
    var index = $(".thumbnail li").index(this);
    //コンテンツを一度すべて非表示にし、
    $(".box").css("display", "none");
    //indexに代入された値と同じものを表示する
    $(".box")
      .eq(index) 
      .css("display", "block");
    //一度タブについているクラスselectを消し、
    $(".thumbnail li").removeClass("select");
    //クリックされたタブのみにクラスにselectをつける
    $(this).addClass("select");
  });
});

少し細かく見ていきます。

$(".thumbnail li").on("click",function()

.thumbnail liクラスのどれでもいいのでクリックしたら以下のfunctionを実行しなさい、となります。

var index = $(".thumbnail li").index(this);

・index()は要素の順番を取得する関数です。

・thumbnail liクラスの何番目がクリックされたかを取得します。（0→1→2の順に数えます）

・取得した数をindexという変数に代入しています。(var index)

$(".box").css("display", "none");

・boxクラス（大きい箱）を一度全て非表示にします。

$(".box").eq(index).css("display", "block");

・.eq(index)のeqはequal（イコール）ですね。

・先ほど取得した、index番号と同じ（イコール）.boxを表示しなさい、となります。

ここまでで、下のサムネイルで押したものと対応するボックスが表示されます。

$(".thumbnail li").removeClass("select");
$(this).addClass("select");

・thumbnail liクラスに付いているselectクラスを外します。

・this（ここではクリックしたクラス）にselectクラスを付けます。

jQueryの読み込みをお忘れなく。

よくわからなくてもOK【初心者向けの方法】

結構無理矢理ですが、別の方法でも書いてみました。
addClassとremoveClassだけでできるので、Progate卒業レベルでできます。

See the Pen タブ切り替え(add/removeClass) by Yuki Nose (@yukinouz1) on CodePen.

<HTML>

<div class="wrapper">
<ul class="main">
  <li class="box box1"></li>
  <li class="box box2"></li>
  <li class="box box3"></li>
</ul>
  <ul class="thumbnail flex">
    <li class="tb1"></li>
    <li class="tb2"></li>
    <li class="tb3"></li>
  </ul>
</div>

<CSS>

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.flex{
  display: flex;
}

ul{
  list-style: none;
}

.box{
  width: 300px;
  height: 300px;
  background: #eaeaea;
  margin-bottom: 20px;
}

.box1,.tb1{
  background: #eaeaea;
}

.box1.on{
  display: none;
}

.box2,.tb2{
  background: #ffbf7f;
}

.box2{
  display: none;
}

.box2.on{
  display: block;
}

.box3,.tb3{
  background: #ff7f7f;
}

.box3{
  display: none;
}

.box3.on{
  display: block;
}

.thumbnail li{
  width: 50px;
  height: 50px;
  margin-right: 15px;
}

.thumbnail li:last-child{
  margin-right: 0;
}

.thumbnail li.select{
  border: 2px solid #7fbfff;
}

HTML CSSでは各ボックス、各サムネイルを識別できるようにそれぞれにクラスを付与しています。idでもいいと思います。

・box1は初期に表示しているもの

・box2とbox3は最初表示しないので(display: none;)にしています。

・それぞれのクラスに.onクラスを用意しており、jQueryで.onを付けたり外したりします。

jQuery(function($) {
  $(".tb1").on("click", function() {
    $(".box1").removeClass("on");
    $(".box2").removeClass("on");
    $(".box3").removeClass("on");
  });
  $(".tb2").on("click", function() {
    $(".box1").addClass("on");
    $(".box2").addClass("on");
    $(".box3").removeClass("on");});
  $(".tb3").on("click", function() {
    $(".box1").addClass("on");
    $(".box2").removeClass("on");
    $(".box3").addClass("on");}); 
});

tb1, tb2, tb3のクラスが押されたら、addClass, removeClassで、box1, box2, box3のonクラスをつけたり外したりします。

borderは省略しましたが、気合いでaddClass、removeClassを付けていけばできますね(^^;

かっこいいjQueryではないですが、ちゃんと動きます。

まずは自分のできる知識で実装できるか試してみて、もっと効率のいい書き方はないか、研究するのがいいかと思います。