Enjoy Creating
Web & Mobile Apps
MENU BOX
Webで
遊ぼ！
OPEN
2021・05・03
＊タブで表示が切り替わる機能です＊
タブをクリック（タップ）することで、下のボックスの表示が切り替わります。縦スクロール量を減らしたい時、ページをコンパクトに納めたい時などにどうぞ！
使用機能：CSS・JavaScript（jQuery非使用）
タブ１
タブ２
タブ３
上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）
HTML・CSS・JavaScript
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
</head>
<style>
html p {
margin-block-start: 0;
margin-block-end: 0;
}
.sampletabcode {
width: 70vw;
margin: 0 auto;
}
.sampletabbox {
display: flex;
}
.sampletab {
border-radius: 5px 5px 0 0;
padding: 10px 18px;
margin-right: 10px;
cursor: pointer;
}
.sampleactivetab {
background-color: lightblue;
color: darkblue;
}
.samplehidetab {
background-color: darkblue;
color: grey;
}
.sampletabarea {
padding:1rem;
border-radius: 0 5px 5px 5px;
box-shadow: 1px 1px 2px;
height: 20vh;
width: 70vw;
}
#sampletabarea1 {
background-color: rgba(255, 255, 230, 0.7);
}
#sampletabarea2 {
background-color: rgba(229, 255, 199, 0.52);
}
#sampletabarea3 {
background-color: rgba(233, 250, 255, 0.79);
}
.samplehide {
display: none;
}
</style>
<body>
<div class="sampletabcode">
<div class="sampletabbox">
<div id="sampletab1" class="sampletab sampletab1 sampleactivetab">
<p>タブ１</p>
</div>
<div id="sampletab2" class="sampletab sampletab2 samplehidetab">
<p>タブ２</p>
</div>
<div id="sampletab3" class="sampletab sampletab3 samplehidetab">
<p>タブ３</p>
</div>
</div>
<div id="sampletabarea1" class="sampletabarea">
<p>新着情報１：３月６日 新商品発売！</p>
</div>
<div id="sampletabarea2" class="sampletabarea samplehide">
<p>新着情報２：４月８日 店休日のお知らせ</p>
</div>
<div id="sampletabarea3" class="sampletabarea samplehide">
<p>新着情報３：６月２日 ホームページを公開しました</p>
</div>
</div>
<script type="text/javascript">
{
const tab1 = document.getElementById('sampletab1');
const tab2 = document.getElementById('sampletab2');
const tab3 = document.getElementById('sampletab3');
const tabarea1 = document.getElementById('sampletabarea1');
const tabarea2 = document.getElementById('sampletabarea2');
const tabarea3 = document.getElementById('sampletabarea3');
tab1.addEventListener('click',function(evevt) {
tab1.classList.add('sampleactivetab');
tab1.classList.remove('samplehidetab');
tab2.classList.add('samplehidetab');
tab2.classList.remove('sampleactivetab');
tab3.classList.add('samplehidetab');
tab3.classList.remove('sampleactivetab');
tabarea1.classList.remove('samplehide');
tabarea2.classList.add('samplehide');
tabarea3.classList.add('samplehide');
});
tab2.addEventListener('click',function(evevt) {
tab2.classList.add('sampleactivetab');
tab2.classList.remove('samplehidetab');
tab1.classList.add('samplehidetab');
tab1.classList.remove('sampleactivetab');
tab3.classList.add('samplehidetab');
tab3.classList.remove('sampleactivetab');
tabarea2.classList.remove('samplehide');
tabarea1.classList.add('samplehide');
tabarea3.classList.add('samplehide');
});
tab3.addEventListener('click',function(evevt) {
tab3.classList.add('sampleactivetab');
tab3.classList.remove('samplehidetab');
tab1.classList.add('samplehidetab');
tab1.classList.remove('sampleactivetab');
tab2.classList.add('samplehidetab');
tab2.classList.remove('sampleactivetab');
tabarea3.classList.remove('samplehide');
tabarea2.classList.add('samplehide');
tabarea1.classList.add('samplehide');
});
}
</script>
</body>
</html>