jQuery：タブパネル - Webデザインのこと、いろいろ

f:id:sankoblog:20160707204600p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>display-tableを使ったタブパネル</title>
<link rel="stylesheet" href="css/style_tab01.css">
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/current.js"></script>
</head>

<body>
<section id="panel">
<h1>世界の風景</h1>
<ul class="tab">
<li class="current"><a href="#alaska">アラスカ</a></li>  
<li><a href="#ny">ニューヨーク</a></li>
<li><a href="#alps">アルプス</a></li>
<li><a href="#dobai">ドバイ</a></li>
</ul>

<div class="tabContents current" id="alaska">
<div class="round">
<p><a href="#"><img src="img/01.png" alt=""></a></p>
</div><!--.round-->
<p class="text">アラスカは寒く、白熊だって暮らしています。名物料理には、海鳥をアザラシの中に詰めこみ、地中に長期間埋めて作る、キビヤックがあります。</p>
</div><!--.tabContents .current"#alaska-->

<div class="tabContents" id="ny">
<div class="round">
<p><a href="#"><img src="img/02.png" alt=""></a></p>
</div><!--.round-->
<p class="text">ニューヨークには、たくさんの種類のひとが暮らしています。かっこいいですもんね。鳩は、人がたくさん暮らすところに出没します。えさ、もらえますもんね。</p>
</div><!--.tabContents .current"#ny-->

<div class="tabContents" id="alps">
<div class="round">
<p><a href="#"><img src="img/03.png" alt=""></a></p>
</div><!--.round-->
<p class="text">アルプスでの暮らし、それは大変きびしく、山の中でなく、山の麓で暮らすほうがよいでしょう。運がよければハイジに会えるかもしれません。</p>
</div><!--.tabContents .current"#alps-->

<div class="tabContents" id="dobai">
<div class="round">
<p><a href="#"><img src="img/04.png" alt=""></a></p>
</div><!--.round-->
<p class="text">ドバイ、そこはお金持ちしか入ることのできない、なぞの国です。もしも入国することがあれば、大事なのは平常心です。</p>
</div><!--.tabContents .current"#dobai-->
</section>
</body>
</html>

@charset "utf-8";
/* CSS Document */
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}
 article, aside, dialog, figure, footer, header,
 main, menu, nav, section { display: block; }
/*----------------------------------*/
/* font-size */
html { font-size: 62.5%; }  /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
h1 { font-size: 32px; font-size: 3.2rem; }
h2 { font-size: 24px; font-size: 2.4rem; }
h3 { font-size: 20px; font-size: 2.0rem; }
h4 { font-size: 18px; font-size: 1.8rem; }
p { font-size: 16px; font-size: 1.6rem }
/*----------------------------------*/
body {
	background: #333;
	font: 14px/1.3 sans-serif; /*font指定のショートハンド*/
	overflow-y: scroll;  /*最初からスクロールバーを出しておく*/
}
#panel {
	width: 630px;
	margin: 10px auto 0;
	background: #666;
	color: #FFF;
	padding: 10px;
}
h1 {
	color: #FFF;
	font-size: 16px;
	padding: 10px 5px;
	letter-spacing: 2px;
}
ul.tab {
	display: table;
	width: 100%;
	border-collapse: collapse;
}
ul.tab li {
	display: table-cell;
	width: 25%;
}
ul.tab li a {
	display: block;
	background: #aaa;
	background-image: linear-gradient(to bottom, #999,#CCC);
	border: 1px solid #666;
	border-bottom: none;
	border-radius: 5px 5px 0 0;
	border-shadow: 0 0 3px rgba(0,0,0,0.2);
	color: #FFF;
	font-size: 12px;
	font-weight: bold;
	margin: 0 2px;
	padding: 20px;
	text-align: center;
	letter-spacing: 2px;
}
ul.tab li.current a {
	background: #FCFCFC;
	color: #000;
}
div.tabContents {
	display: none;
	padding: 0 3px;
}
div.tabContents.current {
	display: block;
}
div.round {
	background: #FCFCFC;
	border-radius: 0 0 5px 5px;
	padding: 10px;
	text-align: center;
	height: 400px;
}
div.tabContents p.text {
	margin: 10px;
	line-height: 1.4;
}