読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

タブパネル

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

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

JavaScriptの内容
CSSの内容
HTMLの内容
jQueryの内容
WordPressの内容


  tab_selected.jpg


  tab.jpg


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブパネル</title>
<script src="jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="style.css">
</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">WordPress</a></li>
</ul>
<ul class="panel">
<li id="tab1">JavaScriptの内容が入る</li>
<li id="tab2">CSSの内容が入る</li>
<li id="tab3">HTMLの内容が入る</li>
<li id="tab4">jQueryの内容が入る</li>
<li id="tab5">WordPressの内容が入る</li>
</ul>
</div>
<script>
$(function(){

});
</script>
</body>
</html>


《style.css

@charset "UTF-8";

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

body, div, 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;
}

/* ------- base ------- */
body {
  font-size: 16px;
}

/* ------- layout ------- */
#container {
  width: 500px;
  margin: 50px auto;
}
ul.tab {
  overflow: hidden;
}
ul.tab li {
  float: left;
  width: 100px;
  height: 40px;
}
ul.tab li a {
  display: block;
  background: url(../img/tab.jpg) no-repeat;
  color: blue;
  line-height: 40px;
  text-align: center;
}
ul.tab li a.selected {
  background: url(../img/tab_selected.jpg) no-repeat;
  color: #333;
  cursor: default;
}
ul.panel {
  border: 1px solid #9FB7D4;
  border-top: none;
}
ul.panel li {
  padding: 16px;
  color: #333;
}


  

タブパネルの初期表示状態の設定
  • CSSの記述まででは、すべてのパネルが展開した状態ですから、パネル(a要素)のタブに対応するパネルをすべて「hide()」で非表示にします
  • 選択状態のパネル(a要素)のclass属性が「selected」のタブに対応するパネルのみを「show()」で表示にします
$( 'ul.panel li' ).hide();
$($( 'ul.tab li a.selected' ).attr( 'href' )).show();


否定擬似クラスを使ったタブパネルの初期表示状態の設定

  • 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();


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

  • a要素に設定する場合は、「return false;」を忘れずに記述する
  • 記述していない場合は、パネルの内容のみが表示されるリンクとなります
  $( 'ul.tab li a' ).on( '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();
<script>
$(function(){
  $( 'ul.panel li' ).hide();
  $($( 'ul.tab li a.selected' ).attr( 'href' )).show();
  $( 'ul.tab li a' ).on( 'click', function(){
    $( 'ul.tab li a.selected' ).removeClass( 'selected' );
    $(this).addClass( 'selected' );
    $( 'ul.panel li' ).hide();
    $($(this).attr( 'href' )).show();
    return false;
  });
});
</script>


  

応用例


和食器
洋食器
ガラス食器

湯呑み
急須
小鉢

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

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

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

Copyright (c) 2015 tableware
<header>
<div id="header-inner">
<div id="logo">
<img src="img/logo.png" alt="">
</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) 2015 tableware</small>
</footer><!-- /footer-->

《style.css

@charset "UTF-8";

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

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;
  color: #292623;
}
img {
  border:0;
  vertical-align: bottom;
}

/* ------- base ------- */
body {
  font-size: 16px;
  color: #292623;
}

/* ------- header ------- */
header {
  width:100%;
  height: 120px;
  background: #D8D8C5 url(../img/bg.png) repeat-x 0 bottom;
}
#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;
  overflow: hidden;
}
#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: #747468;
  color:#FFF;
}
#tab li a.selected {
  background: #FFF;
  color:#292623;
}

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

/* ------- footer ------- */
footer {
  width:100%;
  height: 50px;
  background: #494941;
  padding-top:16px;
  text-align:center;
  color:#CCC;
  position:fixed;
  bottom:0;
}
jQeryの記述
<script>
$(function(){
  $('#content section').hide();
  $($('#tab a.selected').attr('href')).show();
  $('#tab li a').on( 'click', function(){
    $('#tab li a.selected').removeClass('selected');
    $(this).addClass('selected');
    $('#content section').hide();
    $($(this).attr('href')).fadeIn();
    return false;
  });
});
</script>