<div class="tab_01">
<ul class="tab_01--nav">
<li class="tab_01--nav_item"><a class="tab_01--nav_link" aria-current="page" href="#content1">Tab1</a></li>
<li class="tab_01--nav_item"><a class="tab_01--nav_link" href="#content2">Tab2</a></li>
<li class="tab_01--nav_item"><a class="tab_01--nav_link" href="#content3">Tab3</a></li>
</ul>
<div id="content1" class="tab_01--content">
content1
</div>
<div id="content2" class="tab_01--content">
content2
</div>
<div id="content3" class="tab_01--content">
content3
</div>
</div>
/* No context defined. */
// =====================================================================================
//
// tab_01
//
// =====================================================================================
@use 'scss/global' as g;
// -------------------------------------------------------------------------------------
// 変数
// -------------------------------------------------------------------------------------
// 非アクティブ状態の色
$color_inactive: transparent;
// アクティブ状態の色
$color_active: #f0f0f0;
// ホバー時アニメーションの継続時間
$hover_duration: 0.3s;
// ホバー時アニメーションのイージング
$hover_easing: g.$ease_out_cubic;
// 切り替え時アニメーションの継続時間
$switch_duration: 0.3s;
// 切り替え時アニメーションのイージング
$switch_easing: g.$ease_out_cubic;
// -------------------------------------------------------------------------------------
// 全体枠
// -------------------------------------------------------------------------------------
.tab_01 {
@include g.holder();
}
// -------------------------------------------------------------------------------------
// 全体枠 > ボタンリスト
// -------------------------------------------------------------------------------------
.tab_01--nav {
display: flex;
margin: 0 0 32px;
}
// -------------------------------------------------------------------------------------
// 全体枠 > ボタンリスト > ボタン
// -------------------------------------------------------------------------------------
.tab_01--nav_item {
flex-basis: 100%;
margin: 0 8px 0 0;
&:last-child {
margin-right: 0;
}
}
// -------------------------------------------------------------------------------------
// 全体枠 > ボタンリスト > ボタン > リンク
// -------------------------------------------------------------------------------------
.tab_01--nav_link {
display: block;
padding: 16px;
text-align: center;
background-color: $color_inactive;
transition: background-color $hover_duration $hover_easing;
&:hover,
&[aria-current='page'] {
background-color: $color_active;
}
}
// -------------------------------------------------------------------------------------
// 全体枠 > コンテンツ
// -------------------------------------------------------------------------------------
@keyframes tab_01_anim {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.tab_01--content {
display: none;
&.is_show {
display: block;
animation: tab_01_anim $switch_duration $switch_easing;
}
}
// =====================================================================================
//
// tab_01
// - このファイルを「src/js/components」に移動して使用してください
// - 呼び出しの際、引数にRootsの名前を指定してください
// - 記述例：
// import tab_01 from './components/tab_01';
// tab_01('tab');
//
// =====================================================================================
import $ from 'jquery';
export default function (rootsName) {
let $currentLink;
function update() {
const targetId = $currentLink.attr('href');
$('.' + rootsName + '--content').removeClass('is_show');
$(targetId).addClass('is_show');
}
$(() => {
$currentLink = $('.' + rootsName + '--nav_link[aria-current="page"]');
$('.' + rootsName + '--nav_link').on('click', function () {
$currentLink.attr('aria-current', '');
$currentLink = $(this).attr('aria-current', 'page');
update();
});
update();
});
}