完成形
SCSSを使用
jQueryを使用
See the Pen
RwpJKyX by c-koch0514 (@c-koch0514)
on CodePen.
HTML
html
<!----------------------- タブ ------------------------->
<div id="tab" class="group">
<ul class="tab-group">
<li class="tab is-active">Tab-A</li>
<li class="tab">Tab-B</li>
<li class="tab">Tab-C</li>
</ul>
<!--タブを切り替えて表示するコンテンツ-->
<div class="panel-group">
<div class="panel is-show">
Content-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-A
</div>
<div class="panel">
Content-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-B
</div>
<div class="panel">
Content-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-C
</div>
</div>
</div>
<!----------------------- end of タブ ------------------------->
SCSS
scss
/***********************************************************************/
/********** タブの設定 *************/
/***********************************************************************/
.group {
.tab-group,
.panel-group {
display: flex;
width: 350px;
margin: 0 auto;
.tab {
width: calc(350px / 3);
background-color: pink;
text-align: center;
border: 1px solid #000;
cursor: pointer;
}
.is-active {
background-color: red;
}
.panel {
width: 100%;
background-color: yellow;
border: 1px solid #000;
padding: 10px 20px;
display: none;
}
.is-show {
display: block;
}
}
}
/********************* ena of タブ **********************************/
/***********************************************************************/
jQuery
jQuery
$(function(){
/***************** タブ **********************/
$('.tab').click(function(){
// クリックした要素の先祖要素の中で、classの値がgroupの要素を取得
const group = $(this).parents('.group');
group.find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
group.find('.is-show').removeClass('is-show');
// クリックしたタブからインデックス番号を取得
var index = $(this).index();
// クリックしたタブと同じインデックス番号をもつコンテンツを表示
group.find(".panel").eq(index).addClass('is-show');
});
/*********************************************************/
});
同じHTMLに複数タブが存在するとき
HTMLで#tab以外のidを持ち、.groupをもったタブを作ればいい
html
<!--------------------------１つ目のタブ--------------------------------->
<div id="tab" class="group">
<ul class="tab-group">
<li class="tab is-active">Tab-A</li>
<li class="tab">Tab-B</li>
<li class="tab">Tab-C</li>
</ul>
<!--タブを切り替えて表示するコンテンツ-->
<div class="panel-group">
<div class="panel is-show">
Content-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-A
</div>
<div class="panel">
Content-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-B
</div>
<div class="panel">
Content-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-C
</div>
</div>
</div>
<!--------------------------２つ目のタブ--------------------------------->
<div class="group">
<ul class="tab-group">
<li class="tab is-active">Tab-A</li>
<li class="tab">Tab-B</li>
<li class="tab">Tab-C</li>
</ul>
<!--タブを切り替えて表示するコンテンツ-->
<div class="panel-group">
<div class="panel is-show">
Content-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-A
</div>
<div class="panel">
Content-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-B
</div>
<div class="panel">
Content-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-C
</div>
</div>
</div>
↧