<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<style>@charset "UTF-8";
/* --------------------------------------------------------------------------------
Tabのレイアウト
-------------------------------------------------------------------------------- */
/*tabの形状*/
.tab {
display: flex;
flex-wrap: wrap;
}
.tab li a {
display: block;
background: #ddd;
margin: 0 2px;
padding: 10px 20px;
border-radius: 10px 10px 0px 0px;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a {
background: #fec464;
}
/*エリアの表示非表示と形状*/
.area {
display: none; /*はじめは非表示*/
opacity: 0; /*透過0*/
background: #fec464;
padding: 50px 20px;
border-radius: 0px 10px 10px 10px;
margin-left: 2px;
box-shadow: 5px 5px 2px #666;
}
/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
display: block; /*表示*/
animation-name: displayAnime; /*ふわっと表示させるためのアニメーション*/
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes displayAnime {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*========= レイアウトのためのCSS ===============*/
body {
background: #eee;
}
ul {
list-style: none;
}
a {
color: #333;
font-size: clamp(10px, 5vw, 15px);
text-decoration: none;
}
.wrapper {
width: 95%;
max-width: 960px;
margin: 30px auto;
/*background: #fefefe;*/
}
h2 {
margin: 10px 20px;
font-size: clamp(12px, 5vw, 2rem);
}
.area h2 {
font-size: 1.3rem;
margin: 0 0 20px 10px;
}
.area li {
padding: 10px;
font-size: clamp(12px, 5vw, 1rem);
border-bottom: 1px dashed #333;
}</style>
</head>
<body>
<body>
<h2>あなたはどのタイプ？</h2>
<div class="wrapper">
<ul class="tab">
<li>
<a href="#beauty">清楚美人</a>
</li>
<li>
<a href="#cute">清楚かわいい</a>
</li>
<li>
<a href="#gal">ギャル美人</a>
</li>
<li>
<a href="#girl">ギャルかわいい</a>
</li>
</ul>
<div class="resp-tabs-container">
<div id="beauty" class="area">
<h2>大人っぽい子が好み？</h2>
<ul>
<li>綾瀬はるか</li>
<li>深田恭子</li>
<li>松下奈緒</li>
</ul>
<!--/area-->
</div>
<div id="cute" class="area">
<h2>カジュアルな子が好み？</h2>
<ul>
<li>有村架純</li>
<li>浜辺美波</li>
<li>今田美桜</li>
</ul>
<!--/area-->
</div>
<div id="gal" class="area">
<h2>気の強い子が好み？</h2>
<ul>
<li>白石麻衣</li>
<li>北川景子</li>
<li>佐々木希</li>
</ul>
<!--/area-->
</div>
<div id="girl" class="area">
<h2>イケイケな子が好み？</h2>
<ul>
<li>ローラ</li>
<li>藤田ニコル</li>
<li>ダレノガレ明美</li>
</ul>
<!--/area-->
</div>
</div>
<script>//任意のタブにURLからリンクするための設定
function GethashID(hashIDName) {
if (hashIDName) {
//タブ設定
$(".tab li").
find("a").
each(function () {
//タブ内のaタグ全てを取得
var idName = $(this).attr("href"); //タブ内のaタグのリンク名（例）#lunchの値を取得
if (idName == hashIDName) {
//リンク元の指定されたURLのハッシュタグ（例）http://example.com/#lunch←この#の値とタブ内のリンク名（例）#lunchが同じかをチェック
var parentElm = $(this).parent(); //タブ内のaタグの親要素（li）を取得
$(".tab li").removeClass("active"); //タブ内のliについているactiveクラスを取り除き
$(parentElm).addClass("active"); //リンク元の指定されたURLのハッシュタグとタブ内のリンク名が同じであれば、liにactiveクラスを追加
//表示させるエリア設定
$(".area").removeClass("is-active"); //もともとついているis-activeクラスを取り除き
$(hashIDName).addClass("is-active"); //表示させたいエリアのタブリンク名をクリックしたら、表示エリアにis-activeクラスを追加
}
});
}
}
//タブをクリックしたら
$(".tab a").on("click", function () {
var idName = $(this).attr("href"); //タブ内のリンク名を取得
GethashID(idName); //設定したタブの読み込みと
return false; //aタグを無効にする
});
// 上記の動きをページが読み込まれたらすぐに動かす
$(window).on("load", function () {
$(".tab li:first-of-type").addClass("active"); //最初のliにactiveクラスを追加
$(".area:first-of-type").addClass("is-active"); //最初の.areaにis-activeクラスを追加
var hashName = location.hash; //リンク元の指定されたURLのハッシュタグを取得
GethashID(hashName); //設定したタブの読み込み
});
//# sourceURL=pen.js</script>
</body>
</html>