Parts

Parts

タブのパーツ 1

一つ目の内容です。一つ目の内容です。一つ目の内容です。
一つ目の内容です。一つ目の内容です。一つ目の内容です。
一つ目の内容です。一つ目の内容です。一つ目の内容です。
一つ目の内容です。一つ目の内容です。一つ目の内容です。

コードの詳細はこちら
二つ目の内容です。二つ目の内容です。二つ目の内容です。
二つ目の内容です。二つ目の内容です。二つ目の内容です。
二つ目の内容です。二つ目の内容です。二つ目の内容です。
二つ目の内容です。二つ目の内容です。二つ目の内容です。

コードの詳細はこちら
三つ目の内容です。三つ目の内容です。三つ目の内容です。
三つ目の内容です。三つ目の内容です。三つ目の内容です。
三つ目の内容です。三つ目の内容です。三つ目の内容です。
三つ目の内容です。三つ目の内容です。三つ目の内容です。

コードの詳細はこちら

■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から表示する場合に記述するJavascript

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;
	}
}
                
ページ上部に戻るスプーン