Javascript(jQuery) と CSS を使用したタブ切り替えのコード実装をサンプルコードで解説

Javascript(jQuery) と CSS を使用したタブ切り替えのコード実装を紹介します。

実際に、私が作成している別サイトで使用した内容を改変してコードを載せてます。

 

CSSだけで切り替えるやり方もありますが、Javascript と組み合わせの方が、CSSのみで実装するは、切り替えが早いような気がしたので、この方法を採用しました。

 

完成イメージ

type1 details
type2 details
type3 details
type4 details

では、さっそくコードを記載します。

説明順は目次の通りです。

 

Javascript(jQuery)とCSSでタブ切り替えを実装する

当サイトの他の記事と同様、コード内に解説のためにコメントを付加しています。

また、コードを見やすくするため、改行をいれたりしているので実際に使う時は、解説コメントと不要な改行は削除しましょう。

 

やってる内容自体は簡単なので、理解できればすぐ活用できます。

HTML 内容

クリックする対象のラベルと切り替えて表示する内容を別々に用意。

class に active というクラス名を用意して、これを javascript で切り返るだけ。

 

active で表示するかどうかは、CSS で記述してある。

<div class="tab-wrap">
  /* tab ラベル。ここをクリックして切り替える。*/
  <div class="tab-area">
    /* 初期で選択状態にしたものは class に、active を指定しておく */
    <label class="tab-label active">type1</label>
    <label class="tab-label">type2</label>
    <label class="tab-label">type3</label>
    <label class="tab-label">type4</label>
  </div>

  /* tab 切り替えで表示したい内容 */
  <div class="panel-area">
    /* 今は、文字をそのまま書いてるが、table を表示したかったら table をそのまま書けばOK */
    /* 初期で選択状態にしたものは class に、active を指定しておく */
    <div class="tab-panel active">type1 details</div>
    <div class="tab-panel">type2 details</div>
    <div class="tab-panel">type3 details</div>
    <div class="tab-panel">type4 details</div>
  </div>
</div>

Javascript(jQuery) 内容

イベントとか要素取得などが単純化できるので。Javascript というよりは、jQuery で記載してます。

 

処理としては、label がクリックされたら動くように、Javascript のイベントを用意。

active を削除し選択していない状態にする。

次に、何番目のラベルがクリックしたかを取得して、新しく表示するクラスに active を付加し表示切替を行う。

// label 名に、 click イベントを用意しておく
$(".tab-label").on("click", function () {

  // active 要素を一度すべて無くす
  $(".tab-label").removeClass("active");
  $(".tab-panel").removeClass("active");

  // クリックしたラベルが何番目かを取得する
  var $th = $(this).index();

  // 新しい active クラス名を追加する。
  // label は、クリックした this に着ける
  $(this).addClass("active");
  // パネルは、ラベルと同じ index に active を追加する
  $(".tab-panel").eq($th).addClass("active");
});

CSS 内容

完成イメージに乗せていたように表示するためを再現するために、タブ繰り替えに不要なものもありますが、一旦全部載せます。

 

必要なものは、active に関するものだけです。

 

ラベルに関しては、色を変えて選択を明示的に変えているだけ。

パネルの内容部分は、dispay の none と block を切り替えて表示する。

active クラスがあれば、display を block で上書すれば表示切り替わるように見えます。

.tab-area{
  margin: 1px 10px;
}
.tab-area label{
  display: inline-block;  /* 横並び */
  padding: 12px 0;
  width: 130px;
  margin: 0 5px;
  background: #222222;   /* 非選択のラベルの背景 */
  color: #FFFF22;        /* 非選択のラベルの文字色 */
  font-size: 13px;
  text-align: center;
  cursor: pointer;       /* カーソル指に変える */
}
.tab-area label:hover{
  opacity: 0.8;          /* ラベルにカーソルが、きたらラベルの透明度あげる */
}

/* active の場合に、ラベルの色を変える */
.tab-area label.active{
  background: #FFFF22;   /* 選択のラベルの背景 */
  color: #222222;        /* 選択のラベルの文字色 */
}
.panel-area{
  width: 80%;
  border: solid 1px;
}
.tab-panel{
  display: none;         /* display を none にして、active じゃないと表示しない */
  width: 100%;
  height: 100px;
  background: white;
}
.tab-panel.active{
  display: block;        /* active が付いていたら、display で表示する */
}

 

以上です。

 

 

 

読んで頂き、ありがとうございます。
この記事が誰かにとって、一つの参考となれば幸いです。

新たな知識や技術を習得し続けていきたいです。

 

 

 

コメント