Webページでタブレイアウトを実現する

HTML

こんにちは、@yoheiMuneです。
今日は、Webページ上で時々見かけるタブレイアウトを作成してみたので、その内容をブログに残しておきたいと思います。



Webページのタブレイアウトとは

次のようなレイアウトです。タブをクリックすると、その下のコンテンツの表示内容が変化するやつです♪(´ε｀ )

http://www.yoheim.net/labo/tips/tab.html


タブレイアウトを実現するには

タブレイアウトを実現するには、3ステップが必要です。それぞれ実装方法を記載したいと思います。

タブ部分を作成する

タブ部分を作成するには、ul要素とli要素とa要素を使い、またそれらにCSS設定を行う事でタブを作成しました。
HTML

<ul class="tab">
  <li class="tabItem noselected" contentId="content1"><a href="#">Basic</a></li>
  <li class="tabItem noselected" contentId="content2"><a href="#">HTML5, CSS3</a></li>
  <li class="tabItem noselected" contentId="content3"><a href="#">iPhone Developing</a></li>
</ul>

CSS

ul.tab {
  list-style-type:none; /*リスト表示の点などは表示しない*/
  padding-left:0px;
  margin-bottom:0px;
  height:30px; /*タブの高さ*/
}
li.tabItem a{
  display:block;
  float:left;  /*blockにしてfloat:leftにする事で、横に並ぶように指定*/
  background-color:#000033;
  height:25px;
  width:200px;
  margin-right:5px;
  padding-top:5px;
  text-align:center;
  font-weight:bold;
  line-height:25px;  /*文字の縦位置指定。height:25pxと数値を合わせる事で縦位置のセンタリングをしている*/
  margin-bottom:0px;
  text-decoration:none; /*aタグの文字の下線はなし*/
}

上記のように、リスト表示とリンクを利用してタブ部分を実装しました。


コンテンツ部分を作成する

コンテンツ部分は、タブの数分だけコンテンツを作成し、初期表示時には非表示として、選択されたタブの内容だけ表示する事で、タブの切替によりコンテンツを切り替える仕組みとしています。実装例は以下です。

<div id="content1" class="tabContent notShowMe">
  内容1
</div>
<div id="content2" class="tabContent notShowMe">
  内容2
</div>
<div id="content3" class="tabContent notShowMe">
  内容3
</div>

div.tabContent {
  width:610px; /*タブの横幅(余白含む)に合わせると長さがそろってキレイ*/
  height:200px;
  background-color:#ddddee;
}
notShowMe {
  display : none; /*visibilityだと要素は見えなくなるが、位置が変化しないので、displayを利用*/
}
タブ切替の動作を実現する

タブをクリックされた際に、コンテンツを切り替えるには、JavaScriptを利用してコンテンツの表示非表示を切り替えます。こんな感じのJavaScriptです。

window.addEventListener("load", function(){
  addTabMotion();
}, false);

var addTabMotion = function() {
  var tabs = document.querySelectorAll('.tabItem');
  var contents = document.querySelectorAll(".tabContent");
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', function() {
      tabAllHidden();
      var id = this.getAttribute("contentId");
      var content = document.getElementById(id);
      content.className = content.className.replace(/ notShowMe/g, "");
    }, false);
  }
}

var tabAllHidden = function() {
  var contents = document.querySelectorAll(".tabContent");
  for (var i = 0; i < contents.length; i++) {
    contents[i].className += " notShowMe";
  }
}

最後に

タブレイアウトはよく見るけど、タブ部分はどうやって実装するのか疑問でした。また一つ実現出来る事が増えて良かったなぁ。次は、ちょっとした小画面をDIVで作ってみよう(･o･)ゞ
以下は関連サイトです。ご参考になれば幸いです。