WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

display:table-cellを使ったタブパネル

f:id:mmmmofu:20160815162444p:plain

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブ切り替え</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>

<body>
<section id="panel">
<h1>旭山動物園</h1>
<ul class="tab">
<li class="current"><a href="#su">シロクマ</a></li>
<li><a href="#jo">ペンギン</a></li>
<li><a href="#apa">サル</a></li>
<li><a href="#ue">オオカミ</a></li>
</ul>

<div class="tabContents current" id="su">
<div class="round">
<p><a href="#"><img src="img/01.jpg"></a></p>
</div><!-- /.round -->
<p class="text">シマクマ</p>
</div><!-- /.tubContents -->

<div class="tabContents" id="jo">
<div class="round">
<p><a href="#"><img src="img/02.jpg"></a></p>
</div><!-- /.round -->
<p class="text">ペンギン</p>
</div><!-- /.tubContents -->
<div class="tabContents" id="apa">
<div class="round">
<p><a href="#"><img src="img/03.jpg"></a></p>
</div><!-- /.round -->
<p class="text">サル</p>
</div><!-- /.tubContents -->
<div class="tabContents" id="ue">
<div class="round">
<p><a href="#"><img src="img/04.jpg"></a></p>
</div><!-- /.round -->
<p class="text">オオカミ</p>
</div><!-- /.tubContents -->
</section>
</body>
</html>

CSS

@charset "utf-8";

html, body, div, h1, p, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    'Hiragino Kaku Gothic ProN',
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
  border: none;
  vertical-align: bottom;
}
body {
  color: #333;
  font: 14px/1.3 sans-serif;/*font-size/line-height font-family*/
}
#panel {
  width: 630px;
  margin: 10px auto 0;
  background: #666;
  color: #FFF;
  padding: 10px;
}
h1 {
  font-size: 16px;
  padding: 10px 5px;
}
#panel ul.tab {
  display: table;
  width: 100%;
  border-collapse:collapse;
}
#panel ul.tab li {
  display: table-cell;
  width: 25%;
}
#panel ul.tab li a {
  display: block;
  background: #aaa;
  background-image: linear-gradient(to bottom, #eeedf2, #717171 4%, #2b2b2b 74%);
  border: 1px solid #444;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  box-shadow:0 0 3px rgba(0 0 0 0.2);
  color: #FFF;
  font-size: 12px;
  margin: 0 2px;
  padding: 20px;
  text-align: center;
}
#panel ul.tab li.current a {
  background: #FCFCFC;
  color: #000;
}
#panel div.tabContents {
  display: none;
  padding: 0 3px;
}
#panel div.tabContents.current {
  display: block;
}
#panel div.round {
  background: #FCFCFC;
  border-radius: 0 0 5px 5px;
  padding: 10px;
  text-align: center;
  height: 400px;
}
#panel div.tabContents p.text {
  margin: 10px;
  line-height: 1.4;
}

jQuery

$(function(){
//タブ
  $('#panel').find('.tab a').click(function(){//IDとclassを別々に指定する事で読み込みを早くする
    $(this).parent().addClass('current').siblings('.current').removeClass('current');//クリックしたaの親要素(li)にcurrentを付ける。他のli要素にcurrentが付いている場合は削除する
    var tabTarget = $(this).attr('href');//クリックしたa hrefの値を変数化する
    $( tabTarget ).addClass('current').siblings('.current').removeClass('current'); //クリックされたタブの中身の切替
    return false;
  });

});