【jQuery】タブメニュー （data属性使用の場合）

※ 当サイトではアフィリエイト広告を利用しています。

こんにちは、meiです。
今回はdata属性を使用したタブメニューをご紹介したいと思います。
個人的にはaタグを使うよりもこちらの方がコードもシンプルで使い勝手が良い気がしています。

サンプルはこちらをご覧ください。

HTML

サンプルのhtmlは以下です。

<!--タブ部分-->
<ul id="tab">
 <li data-link="a" class="is-active">タブ1</li>
 <li data-link="b">タブ2</li>
 <li data-link="c">タブ3</li>
</ul>

<!--コンテンツ部分-->
<div class="tab-contents">
 <div class="tab-content is-active" id="a">
  <p>タブ1のコンテンツがここに入ります。テキストテキストテキスト。</p>
 </div>
 <div class="tab-content" id="b">
  <p>タブ2のコンテンツがここに入ります。テキストテキストテキスト。</p>
 </div>
 <div class="tab-content" id="c">
  <p>タブ3のコンテンツがここに入ります。テキストテキストテキスト。</p>
 </div>
</div>

CSS

サンプルのcssは以下です。

#tab{
 display: flex;
 margin-bottom: 50px;
}
#tab li{
 width: 33.3333%;
 height: 60px;
 line-height: 60px;
 color: #fff;
 text-align: center;
 background: #000;
 border-right: #fff solid 1px;
 transition: 0.3s;
 cursor: pointer;
}
#tab li:last-child{
 border-right: none;
}
#tab li:hover{
	background: #999;
}
#tab li.is-active{
  background: #999;
}
.tab-content{
	display: none;
}
.tab-content.is-active{
  display: block;
}
.tab-content p{
	text-align: center;
}

jQuery

サンプルのjQueryは以下です。

var $tab = $('#tab li');
var $tab_content = $('.tab-content');

$tab.on('click', function () {
 var this_link = $(this).data('link');
 $tab.removeClass('is-active');
 $(this).addClass('is-active');
	
 $tab_content.removeClass('is-active');

 $tab_content.each(function () {
  var target_id = $(this).attr('id');
  if (this_link === target_id) {
  $(this).addClass('is-active');
  }
 });
});

いかがでしたか？
aタグを使用しないので、余計なイベントも発生しないので使いやすいと思います。

ついでに…data属性とは

要素に視覚表現を行わない追加情報を格納することができます。
今回サンプルで使用しているのは”data-link”ですが、”data-“に続けて任意の文字列を付けて特定の要素に関連付けるデータを渡すことができます。

jQueryで値を呼び出す方法

data属性の取得は、data()メソッドを使用します。
今回のサンプルで使用したようにdata-linkの値を呼び出すには以下のようにします。

var this_link = $(this).data('link');

または

 $(this).attr('data-link')

としても呼び出すことができます。

cssで値を使用する方法

cssの属性セレクターを使用してスタイルに反映することもできます。

#tab li[data-link="a"] {
  color:red;
}

まとめ

今回はdata属性を使用したタブメニューのサンプルをご紹介しましたが、
data属性、いろいろと活用できそうですよね！