タブパネル - 実践

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

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


https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-0818/20141020/20141020084852.jpg tab_selected.jpg


https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-0818/20141020/20141020084851.jpg tab.jpg



《tab.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブパネル</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div class="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"><strong>JavaScript</strong><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue elit eu mauris sollicitudin dictum. Phasellus nec felis ut arcu placerat tincidunt. Vestibulum luctus mauris ac ante molestie eleifend. Quisque dapibus nulla ac purus volutpat posuere a quis nisl. Nam condimentum purus vitae nibh feugiat imperdiet.</li>
<li id="tab2"><strong>CSS</strong><br>Nam cursus molestie erat, a sodales erat sollicitudin ut. Maecenas nec urna mi, eu congue turpis. Duis vitae volutpat lorem. Ut vulputate tempor elit, vitae iaculis elit sollicitudin at. Ut gravida fermentum tempor. Mauris metus ante, volutpat et porta a, malesuada vel purus. In lobortis ullamcorper lorem eu malesuada. </li>
<li id="tab3"><strong>HTML</strong><br>Pellentesque in metus leo. Praesent porta, dolor nec mattis ullamcorper, velit purus mollis enim, nec tincidunt magna massa ornare elit. In ipsum enim, pellentesque vitae gravida ultrices, aliquet nec ante. Mauris sed nunc ut ligula dictum convallis vel et nunc.</li>
<li id="tab4"><strong>jQueryt</strong><br>Vestibulum a quam scelerisque odio ultricies mollis eget a leo. Morbi dictum, velit lobortis hendrerit tincidunt, lacus nisl rhoncus felis, commodo sollicitudin magna augue non est. Nunc in felis quis purus dignissim blandit vel ut erat. In hac habitasse platea dictumst..</li>
<li id="tab5"><strong>PHP</strong><br>Vestibulum consequat consequat aliquet. Aenean ut nunc dolor, vel dictum mauris. Proin neque eros, tincidunt at faucibus a, dapibus sit amet tellus. Etiam rutrum pharetra risus porta ullamcorper. Nunc convallis orci at massa suscipit porta.</li>
</ul>
</div><!-- /.container -->
</body>
</html>
ページ内リンク
  • この時点でのプレビューは、ページ内リンクとして稼働します
  • CSSタブをクリックすると、ページがCSSの内容から表示するようにジャンプします
CSSの記述
  • stye.cssを外部参照
  • タブ部分(ul.tab li)は、floatを利用して横一列に並べる
  • a要素を「display: block」でブロックレベル要素に変更してクリックしやすくする
  • タブが選択された状態のデザインをa要素にクラス名「selected」を追加し、背景画像を「tab_selected.jpg」に変更します
@charset "utf-8";

/* reset
---------------------------------------------- */
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}

/* layout
---------------------------------------------- */
.container {
  width: 500px;
  margin: 50px auto;
}

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

/* panel
---------------------------------------------- */
ul.panel {
  border: 1px solid #9FB7D4;
  border-top: none;
  overflow: hidden;
}
ul.panel li {
  padding: 20px;
  color: #333;
}
jQueryの記述
  • テキスト内容とは別の記述


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

  • CSSの記述まででは、すべてのパネルが展開した状態ですから、選択状態のパネル(a要素)のclass属性が「selected」のタブに対応するパネル以外を「hide()」で非表示にします
  • li要素の後に、否定擬似クラスの「:not()」がついているので、この場合はid属性に「#tab1」がついたパネル以外が「hide()」で非表示になります


書き換えると、

  $( '.panel li:not(#tab1)' ).hide();


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

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

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


body終了タグの前にembed

<script>
$(document).ready(function(){
  $( '.panel li:not(#tab1)' ).hide();
  $( '.tab li a' ).on ( 'click', function(){
    $( '.panel li' ).hide();
    $( '.tab li a' ).removeClass( 'selected' );
    $( $(this).attr( 'href' ) ).show();
    $( $(this) ).addClass( 'selected' );
    return false;
  });
});
</script>

求職者支援訓練 フェリカテクニカルアカデミー