タブパネル - 実践

基本のタブパネルの作り方

  • タブ（見出し）とパネル（表示する内容）をそれぞれ別のリストで記述します
  • タブのul要素には「tab」、パネルのul要素には「panel」というclass名をつけます
  • パネル部とタブ部が連動するよう「id名」をつけ、href属性に#（ハッシュ）をつけたid名を記述します
  • 初期状態で表示するタブには、a要素にclass属性「selected」を設定しておきます


　　tab_selected.jpg


　　tab.jpg




《tab.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブパネル</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
  $( '.panel li:not( #tab1 )' ).hide();
  $( '.tab li a' ).on( 'click', function(){
      $( '.tab a.selected' ).removeClass( 'selected' );
      $( this ).addClass( 'selected' );
    $( '.panel li' ).hide();
    $( $( this ).attr( 'href' ) ).show();
    return false;
  });
});
</script>
<style>
/* reset
------------------------------------------- */
html, body, ul, li {
  margin:0;
  padding:0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul { list-style: none; }

/* layout
------------------------------------------- */
#container{
  width:500px;
  margin:20px auto;
}

/* tab
------------------------------------------- */
.tab{
  overflow: hidden;
}
  .tab li{
    float: left;
    width: 100px;
    height: 40px;
  }
  .tab a{
    display: block;
    background: url("img/tab.jpg") no-repeat center top;
    color: blue;
    line-height: 40px;
    text-align: center;
  }
  .tab a.selected{
    background: url("img/tab_selected.jpg") no-repeat center top;
    text-decoration: none;
    color: #333;
    cursor: pointer;
  }

/* panel
------------------------------------------- */
.panel{
  border: 1px solid #9FB7D4;
  border-top: 0;
}
  .panel li{
    padding: 16px;
    line-height: 1.5;
    color: #333;
  }
</style>
</head>
<body>
<div id="container">
  <ul class="tab">
  <li><a href="#tab1" class="selected">JavaScript</a></li>
  <li><a href="#tab2">CSS</a></li>
  <li><a href="#tab3">HTML</a></li>
  <li><a href="#tab4">jQuery</a></li>
  <li><a href="#tab5">PHP</a></li>
  </ul>
  <ul class="panel">
    <li id="tab1">JavaScriptの内容が入る JavaScriptの内容が入る JavaScriptの内容が入る JavaScriptの内容が入る JavaScriptの内容が入る JavaScriptの内容が入る </li>
    <li id="tab2">CSSの内容が入る CSSの内容が入る CSSの内容が入る CSSの内容が入る CSSの内容が入る CSSの内容が入る CSSの内容が入る CSSの内容が入る CSSの内容が入る CSSの内容が入る</li>
    <li id="tab3">HTMLの内容が入る HTMLの内容が入る HTMLの内容が入る HTMLの内容が入る HTMLの内容が入る HTMLの内容が入る HTMLの内容が入る HTMLの内容が入る HTMLの内容が入る</li>
    <li id="tab4">jQueryの内容が入る jQueryの内容が入る jQueryの内容が入る jQueryの内容が入る jQueryの内容が入る jQueryの内容が入る jQueryの内容が入る jQueryの内容が入る jQueryの内容が入る </li>
    <li id="tab5">PHPの内容が入る PHPの内容が入る PHPの内容が入る PHPの内容が入る PHPの内容が入る PHPの内容が入る PHPの内容が入る PHPの内容が入る PHPの内容が入る PHPの内容が入る</li>
  </ul>
</div><!-- /#container -->
</body>
</html>


この時点でのプレビューは、ページ内リンクとして稼働します。

CSSの記述
  • stye.cssを外部リンク
  • タブ部分（ul.tab li）は、floatを利用して横一列に並べる
  • a要素を「display: block」でブロックレベル要素に変更してクリックしやすくする
  • タブが選択された状態のデザインを「a.selected」で定義し、背景画像を「tab_selected.jpg」に変更します
  • haikei
jQueryの記述
<script>
$(function(){
  $( 'ul.panel li:not( '+$( 'ul.tab li a.selected' ).attr( 'href' )+' )' ).hide();
  $( 'ul.tab li a' ).click(function(){
    $( 'ul.tab li a.selected' ).removeClass( 'selected' );
    $(this).addClass( 'selected' );
    $( 'ul.panel li' ).hide();
    $($(this).attr( 'href' )).show();
    return false;
  });
});
</script>


タブパネルの初期表示状態の設定

  • CSSの記述まででは、すべてのパネルが展開した状態ですから、選択状態のパネル（a要素）のclass属性が「selected」のタブに対応するパネル以外を「hide()」で非表示にします
  • li要素の後に、否定擬似クラスの「:not()」がついているので、この場合はid属性に「#tab1」がついたパネル以外が「hide()」で非表示になります
$( 'ul.panel li:not( '+$( 'ul.tab li a.selected' ).attr( 'href' )+' )' ).hide();
  • 分解すると文字列の連結になります
$(
　　'ul.panel li:not('
　　+
　　$( 'ul.tab li a.selected' ).attr( 'href' )
　　+
　　')'
).hide();


書き換えると、

$( 'ul.panel li' ).hide();
$( $( 'ul.tab li a.selected' ).attr( 'href' ) ).show();


タブがクリックされたときのイベントの設定

  • a要素に設定する場合は、「return false;」を忘れずに記述する
  $( 'ul.tab li a' ).click(function(){

    return false;
  });
  • タブがクリックされたとき、class属性「selected」がついていたところから削除し、クリックされたところに追加します
    $( 'ul.tab li a.selected' ).removeClass( 'selected' );
    $(this).addClass( 'selected' );
  • すべてのぱねるを非表示にします
  • 「$(this).attr( 'href' )」でクリックされたa要素のhref属性の値を取得して、値と同じ名前のid属性をもつパネルをshow()で表指示ます
    $( 'ul.panel li' ).hide();
    $($(this).attr( 'href' )).show();
例


和食器
洋食器
ガラス食器

湯呑み
急須
小鉢

YUNOMI
湯呑み画像
モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。

KYUSU
急須画像
モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。

KOBACHI
小鉢画像
モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。

Copyright (c) 2014 tableware All Right Reserved.


《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UF-8">
<title>タブメニュー</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function () {
  $( '#content section' ).hide();
  $( $( '#tab a.selected' ).attr( 'href' )).show();
  $( '#tab li a').on( 'click' , function () {
    $( '#tab li a').removeClass();
    $( this ).addClass( 'selected' );
    $( '#content section ').hide();
    $( $(this).attr( 'href ') ).fadeIn();
    return false;
  });
});
</script>
</head>
<body>
<header>
<div id="header-inner">
<div id="logo">
<img src="img/logo.png" alt="tableware">
</div>
<ul id="nav">
<li><a href="#"><img src="img/menu1.png" alt="和食器"></a></li>
<li><a href="#"><img src="img/menu2.png" alt="洋食器"></a></li>
<li><a href="#"><img src="img/menu3.png" alt="ガラス食器"></a></li>
</ul>
</div><!-- /#nav-->
<ul id="tab">
<li><a href="#tab1" class="selected">湯呑み</a></li>
<li><a href="#tab2">急須</a></li>
<li><a href="#tab3">小鉢</a></li>
</ul><!-- /#tab-->
</header><!-- /header -->
<div id="content">
<section id="tab1">
<h1>YUNOMI</h1>
<img src="img/yunomi.jpg" alt="湯呑み画像">
<p>モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。</p>
</section>
<section id="tab2">
<h1>KYUSU</h1>
<img src="img/kyusu.jpg" alt="急須画像">
<p>モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。</p>
</section>
<section id="tab3">
<h1>KOBACHI</h1>
<img src="img/kobachi.jpg" alt="小鉢画像">
<p>モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。</p>
</section>
</div><!-- /#content-->
<footer>
<small>Copyright (c) 2014 tableware All Right Reserved.</small>
</footer><!-- /footer-->
</body>
</html>


《style.css》

@charset "UTF-8";

/* ------- reset ------- */

body, div, ul, li {
  margin:0;
  padding:0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: #292623;
}
img {
  border:0;
  vertical-align: bottom;
}

/* ------- base ------- */
body {
  background-color: #FFF;
  font-size: 16px;
  font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color: #292623;
}

/* ------- header ------- */
header {
  width:100%;
  height: 120px;
  background: url(../img/bg.png) repeat-x 0 bottom #D8D8C5;
}
#header-inner {
  width: 700px;
  height: 80px;
  margin: 0 auto;
  overflow: hidden;
}
#logo {
  float: left;
  padding-top: 17px;
}

/* ------- nav ------- */
#nav {
  float: right;
  padding-top: 37px;
}
#nav li {
  float: left;
  padding-left: 15px;
}

/* ------- tab ------- */
#tab {
  width: 700px;
  height: 40px;
  margin: 0 auto;
}
#tab li {
  float: left;
  margin-right: 3px;
}
#tab li a {
  display:block;
  width: 120px;
  height: 34px;
  padding-top: 6px;
  font-size: 1.3em;
  text-align:center;
  background-color: #494941;
  color:#FFF;
}
#tab li a:hover {
  background-color: #747468;
  color:#FFF;
}
#tab li a.selected {
  background-color: #FFF;
  color:#292623;
}

/* ------- content ------- */
#content {
  width: 620px;
  margin: 50px auto;
}
section h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 2.4em;
}
section p {
  width: 390px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 2.0;
}

/* ------- footer ------- */
footer {
  width:100%;
  height: 35px;
  background-color: #494941;
  padding-top:23px;
  text-align:center;
  color:#CCC;
  position:fixed;
  bottom:0;
}