2017.04.03

【CSS , jQuery】複数設置に対応したタブ切り替えのサンプル

Category: css / js

Tags, ,

ページ内で複数設置に対応したタブ切り替えのサンプルです。
サンプルでは最低限の切り替えの記述のみ記載しています。

html

<div class="js-tab-wrap">
<ul>
<li class="js-tab-btn current">タブ1</li>
<li class="js-tab-btn">タブ2</li>
<li class="js-tab-btn">タブ3</li>
<li class="js-tab-btn">タブ4</li>
</ul>
<div class="js-tab-contents current">
<p>タブ1</p>
</div>
<div class="js-tab-contents">
<p>タブ2</p>
</div>
<div class="js-tab-contents">
<p>タブ3</p>
</div>
<div class="js-tab-contents">
<p>タブ4</p>
</div>
</div>

css

.js-tab-contents {
display: none;
}
.js-tab-contents.current {
display: block;
}

js

jQuery(document).ready(function($){
//tab切り替え
$('.js-tab-btn').click(function(){
//セレクタ設定
var thisElm = $(this);
var thisTabWrap = thisElm.parents('.js-tab-wrap');
var thisTabBtn = thisTabWrap.find('.js-tab-btn');
var thisTabContents = thisTabWrap.find('.js-tab-contents');
//current class
var currentClass = 'current';
//js-tab-btn current 切り替え
thisTabBtn.removeClass(currentClass);
thisElm.addClass(currentClass);
//クリックされた tabが何番目か取得
var thisElmIndex =  thisTabBtn.index(this);
//js-tab-contents 切り替え
thisTabContents.removeClass(currentClass);
thisTabContents.eq(thisElmIndex).addClass(currentClass);
});
});

js-tab-btn にもcurrent設定を入れてあるので自由に装飾する事ができます。

js-tab-wrapを1つのブロックとしているため、js-tab-wrap単位でページ内に複数設置する事が可能です。

Category : css / js