Parts
■URLでタブの内容を開く場合のリンク(※Javascript追加必要)
【一つ目のタブの内容を開く】 【二つ目のタブの内容を開く】 【三つ目のタブの内容を開く】「tab__content」というクラス名の中に隠す内容を入れる。
「label」のfor名と「input」のid名は項目ごとにかぶらない名前を付ける。
<div class="tabBox--type01">
<input type="radio" name="tab--type01__input" id="tab--type01__label001" checked>
<label for="tab--type01__label001">タブタイトル01</label>
<input type="radio" name="tab--type01__input" id="tab--type01__label002">
<label for="tab--type01__label002">タブタイトル02</label>
<input type="radio" name="tab--type01__input" id="tab--type01__label003">
<label for="tab--type01__label003">タブタイトル03</label>
<div class="tab__content">
<!--タブの内容ここから-->
<p>タブタイトル01の内容がここに入ります</p>
<!--タブの内容ここまで-->
<!-- /.tab__content --></div>
<div class="tab__content">
<!--タブの内容ここから-->
<p>タブタイトル02の内容がここに入ります</p>
<!--タブの内容ここまで-->
<!-- /.tab__content --></div>
<div class="tab__content">
<!--タブの内容ここから-->
<p>タブタイトル03の内容がここに入ります</p>
<!--タブの内容ここまで-->
<!-- /.tab__content --></div>
<!--//.tabBox--></div>
.tabBox--type01 {
background-color: #fff;
display: block;
}
.tabBox--type01 > label {
width: calc(100% / 3);
font-size: 1.1em;
padding: 1em 0.5em;
text-align: center;
color: #565656;
background: #ddd;
border-right: #ccc solid 0.5px;
border-left: #fff solid 0.5px;
border-radius: 0.3em 0.3em 0 0;
float: left;
transition: all 0.5s ease;
cursor: pointer;
display: block;
}
.tabBox--type01 > label:hover {
opacity: 0.5;
}
.tabBox--type01 > input[type="radio"] {
display: none;
}
.tabBox--type01 .tab__content {
clear: both;
overflow: hidden;
padding: 1em 2em;
border: #808080 solid 1px;
border-top: #000 solid 3px;
transition: 0.4s;
display: none;
}
.tabBox--type01 input:nth-of-type(1):checked ~ .tab__content:nth-of-type(1),
.tabBox--type01 input:nth-of-type(2):checked ~ .tab__content:nth-of-type(2),
.tabBox--type01 input:nth-of-type(3):checked ~ .tab__content:nth-of-type(3) {
display: block;
animation-name: tab--type01--fade;
animation-duration: 1s;
}
.tabBox--type01 > input:checked + label {
background-color: #000;
color: #fff;
pointer-events: none;
}
.tabBox--type01 > input:checked + label:hover {
opacity: 1;
}
@keyframes tab--type01--fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.tabBox--type01 {
background-color: #fff;
display: block;
&>label {
width: calc(100% / 3);
font-size: 1.1em;
padding: 1em 0.5em;
text-align: center;
color: #565656;
background: #ddd;
border-right: #ccc solid 0.5px;
border-left: #fff solid 0.5px;
border-radius: 0.3em 0.3em 0 0;
float: left;
transition: all 0.5s ease;
cursor: pointer;
display: block;
&:hover {
opacity: 0.5;
}
}
&>input[type="radio"] {
display: none;
}
.tab__content {
clear: both;
overflow: hidden;
padding: 1em 2em;
border: #808080 solid 1px;
border-top: #000 solid 3px;
transition: 0.4s;
display: none;
}
input:nth-of-type(1):checked ~ .tab__content:nth-of-type(1),
input:nth-of-type(2):checked ~ .tab__content:nth-of-type(2),
input:nth-of-type(3):checked ~ .tab__content:nth-of-type(3) {
display: block;
animation-name: tab--type01--fade;
animation-duration: 1s;
}
&> input:checked + label {
background-color: #000;
color: #fff;
pointer-events: none;
&:hover {
opacity: 1;
}
}
}
@keyframes tab--type01--fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
URLのパラメータで判断している。
パラメータは
一つ目が「?tab=type01Label001」
二つ目が「?tab=type01Label002」
三つ目が「?tab=type01Label003」
// URLのパラメータを取得
let urlParam = location.search.substring(1);
// タブのinputの要素を取得
let tabType01Elements = document.getElementsByName( "tab--type01__input" ) ;
// URLにパラメータが存在する場合
if(urlParam) {
// 「&」が含まれている場合は「&」で分割
let param = urlParam.split('&');
// パラメータを格納する用の配列を用意
const paramArray = [];
// 用意した配列にパラメータを格納
for (i = 0; i < param.length; i++) {
var paramItem = param[i].split('=');
paramArray[paramItem[0]] = paramItem[1];
}
// パラメータtabで判断し、タブにチェックをつける
if (paramArray.tab == 'type01Label001') {
tabType01Elements[0].checked = true;
} else if (paramArray.tab == 'type01Label002') {
tabType01Elements[1].checked = true;
} else if (paramArray.tab == 'type01Label003') {
tabType01Elements[2].checked = true;
}
}