タブの作り方
↓DEMOのようなタブの作り方を解説します。
- tab1
- tab2
- tab3
HTML
<div class="view_wrap">
<ul class="tab_list">
<li class="js-tab hover_a active" data-num="tab_01">tab1</li>
<li class="js-tab hover_a" data-num="tab_02">tab2</li>
<li class="js-tab hover_a" data-num="tab_03">tab3</li>
</ul>
</div>
<div class="tab_content">
<div class="tab_item tab_01">
<div class="md_img"><img src="https://placehold.jp/ada6fc/ffffff/300x300.png?text=tab1" alt="">
</div></div>
<div class="tab_item tab_02">
<div class="md_img"><img src="https://placehold.jp/ada6fc/ffffff/300x300.png?text=tab2" alt="">
</div></div>
<div class="tab_item tab_03">
<div class="md_img"><img src="https://placehold.jp/ada6fc/ffffff/300x300.png?text=tab3" alt="">
</div></div>
</div>
HTMLは、タブ部分とタブに紐づく表示部分を分けてマークアップします。 現在表示されているタブにはactiveクラスとつけておきます。 また、タブの一つずつにカスタムデータ属性(data-)をつけておきます。jsを使うときにこれがタブを識別するものになります。
CSS
.tab_list{
letter-spacing: -0.4em;
text-align: left;
position:relative;
}
.tab_content{
position:relative;
height: 300px;
}
.js-tab{
display: inline-block;
letter-spacing: normal;
vertical-align:top;
margin-right: 5px;
background-color: #b396e8;
padding: 10px 20px;
}
.tab_01{
position:relative;
}
.tab_02{
display: none;
position:absolute;
top:0;
left:0;
}
.tab_03{
display: none;
position:absolute;
top:0;
left:0;
}
.hover_a:hover {
opacity: 0.8;
cursor: pointer;
}
.js-tab.active{
background-color: #eee;
}
CSSのポイントは、初期表示のタブをposition:relative; にし、ほかをdisplay: none; かつ position:absolute; にするところです。 タブをクリックしたときに表示させるようにします。
JS
$(function () {
var tabBtn = $(".js-tab");
// スイッチをクリック
tabBtn.on("click", function () {
// クリックした要素のカスタムデータ属性を取得
// 取得した属性名をクラス名に変換して、そのクラス名を持つタブ領域を取得
var tabOj = $("." + $(this).attr("data-num"));
// 取得したタブ領域が現在開いている状態ならキャンセル
if (tabOj.css('display') === 'block') {
return;
}
// すべてのタブ領域をfadeOut()する
$(".tab_item").css('display', 'none');
// 取得したタブオブジェクトに対してfadeIn()する
tabOj.fadeIn();
// タブをアクティブの状態にする
tabBtn.removeClass("active");
$(this).addClass("active");
});
});
コメントに書いてある通りですが、クリックした要素を取得→すべてのタブ領域を消す→取得したタブオブジェクトを表示させるという流れです。