CSSのみでタブの切り替えを実装
A place where people live. The world. The world. The world in which people live and relate to each other. It is also a word that conceptually expresses the fragile and ephemeral state of such human society.
An ape living in Africa. They are very large and strong. They live in small families in tree nests.
An ape living in the forests of western and central Africa. They are about 150 cm long and black all over. They form groups, mainly consisting of males. They are cheerful, vocal, and intelligent.
CSSで書くこと
/*タブ全体のスタイル*/
.p-tabs {
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
/*タブのスタイル*/
.p-tabs__tab {
float: left;
display: flex;
justify-content: center;
align-items: center;
width: calc((100% - 6px) / 3);
height: 44px;
padding-bottom: 4px;
background-color: #eceff1;
font-size: 15px;
color: #78909c;
cursor: pointer;
font-weight: bold;
line-height: 1;
transition: color 0.2s, background-color 0.2s;
border-top: 4px solid transparent;
}
/*タブ同士の余白*/
.p-tabs__tab:not(:nth-of-type(1)) {
margin-left: 3px;
}
/*タブを非表示*/
input[name='p-tabs__tab'] {
display: none;
}
/*コンテンツ部分を非表示*/
.p-tabs__content {
display: none;
clear: both;
padding: 20px;
min-height: 200px;
background-color: #fff;
overflow: hidden;
}
/*タブにcheckedが入っているコンテンツ部分を表示*/
#p-tabs__01:checked ~ .p-tabs__content--01,
#p-tabs__02:checked ~ .p-tabs__content--02,
#p-tabs__03:checked ~ .p-tabs__content--03 {
display: block;
}
/*タブにcheckedが入っているタブのスタイル*/
.p-tabs input:checked + .p-tabs__tab {
background-color: #fff;
color: #0277bd;
border-top: 4px solid #0288d1;
}HTMLで書くこと
<div class="p-tabs">
<input id="p-tabs__01" type="radio" name="p-tabs__tab" checked="">
<label class="p-tabs__tab" for="p-tabs__01">Human</label>
<input id="p-tabs__02" type="radio" name="p-tabs__tab">
<label class="p-tabs__tab" for="p-tabs__02">Gorilla</label>
<input id="p-tabs__03" type="radio" name="p-tabs__tab">
<label class="p-tabs__tab" for="p-tabs__03">Chimpanzee</label>
<div class="p-tabs__content p-tabs__content--01">A place where people live. The world. The world. The world in which people live and relate to each other. It is also a word that conceptually expresses the fragile and ephemeral state of such human society.</div>
<div class="p-tabs__content p-tabs__content--02">An ape living in Africa. They are very large and strong. They live in small families in tree nests.</div>
<div class="p-tabs__content p-tabs__content--03">An ape living in the forests of western and central Africa. They are about 150 cm long and black all over. They form groups, mainly consisting of males. They are cheerful, vocal, and intelligent.</div>
</div>
