<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="common.js"></script>
</head>
<body>
<div class="menu__tabscover" id="menu">
<ul class="menu__tab">
<li><a href="#menuA" class="active">メニューA</a></li>
<li><a href="#menuB">メニューB</a></li>
<li><a href="#menuC">メニューC</a></li>
</ul>
<section id="menuA" class="menuA_cont">
<div>メニューAのカスタムフィールドの値が入ります</div>
</section>
<section id="menuB" class="menuB_cont tabcont--hide">
<div>メニューBのカスタムフィールドの値が入ります</div>
</section>
<section id="menuC" class="menuC_cont tabcont--hide">
<div>メニューCのカスタムフィールドの値が入ります</div>
</section>
</div>
</body>@charset "utf-8";
.tabcont--hide {
display: none;
}$(function() {
if ($('#menu')[0]) {
var $tabcontAry = [$('#menuA'), $('#menuB'), $('#menuC')];
$('.menu__tab a').off().on('click', function() {
if (!$(this).hasClass('active')) {
$('.menu__tab a').removeClass('active');
$(this).addClass('active');
var clickdNum = $('.menu__tab a').index($(this));
for (var i = 0; i < $tabcontAry.length; i++) {
$tabcontAry[i].hide();
}
$tabcontAry[clickdNum].fadeIn(200);
}
return false;
});
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.