HTML
<div class="tab-wrap">
<ul role="tablist">
<li>
<a aria-controls="tab-content01" aria-selected="true" href="#tab-content01" role="tab">タブ1</a>
</li>
<li>
<a aria-controls="tab-content02" aria-selected="false" href="#tab-content02" role="tab">HTML</a>
</li>
<li>
<a aria-controls="tab-content03" aria-selected="false" href="#tab-content03" role="tab">Sass</a>
</li>
</ul>
<div class="tabpanel-wrap">
<div aria-hidden="false" id="tab-content01" role="tabpanel">
<!-- タブ1のコンテンツ -->
</div>
<div aria-hidden="true" id="tab-content02" role="tabpanel">
<!-- タブ2のコンテンツ -->
</div>
<div aria-hidden="true" id="tab-content03" role="tabpanel">
<!-- タブ3のコンテンツ -->
</div>
</div>
</div>
Sass
$blue: #009cd5;
@mixin clearfix {
&:after {
content: "";
display: block;
clear: both;
}
}
.tab-wrap {
background: $blue;
padding: 1px 1px 0;
[role="tablist"] {
display: table;
width: 100%;
> li {
display: table-cell;
a {
display: block;
padding: 10px 5px;
text-align: center;
background: $blue;
text-decoration: none;
color: white;
transition: all .3s ease;
&:hover {
background: lighten($blue, 8%);
}
&[aria-selected="true"] {
background: #fff;
color: #000;
}
}
}
}
.tabpanel-wrap {
margin: 0 -1px;
position: relative;
background: #fff;
[role="tabpanel"] {
@include clearfix;
position: absolute;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 25px 25px 15px;
transition: all .5s ease-in;
opacity: 0;
border: 1px solid $blue {
top: 0;
}
&[aria-hidden="false"] {
position: static;
opacity: 1;
}
}
}
}
