Webページ用のごく簡単なタブっぽいインターフェースのサンプル

タブで切り替えるユーザーインターフェース(UI)って魅力的なんですが、いざ実装しようとすると jquery.js や prototype.js などのライブラリのお世話になんなきゃいけなかったりして、ちょっと面倒です。

そんなわけで、シンプルにそれっぽく見えるUIを実装してみました。ソースは以下の通りです。

<html>
<head>
<title>タブUIサンプル</title>
<script type="text/javascript">
function tabselecter(tab, no){
  var tabs = document.getElementById('tab-container').getElementsByTagName('li');
  
  for(i=0; i<tabs.length; i++){
    if(tabs[i] == tab){
      tabs[i].className = 'tab-selected';
      
    }else{
      tabs[i].className = 'tab';
    }
  }
  
  var contents = document.getElementById('tab-content-container').getElementsByTagName('div');
  for(i=0; i<contents.length; i++){
    contents[i].style.display = 'none';
  }
  
  document.getElementById('tab-content'+no).style.display = 'block';
}
</script>
<style type="text/css">
ul.tab-container  {
  list-style:none;
  margin:0;
  padding:0;
  border-bottom:1px solid #DDDDDD;
  float:left;
  width:100%;
}
li.tab{
  float:left;
  margin-left:1em;
  color:#666666;
  padding:0 0.5em;
  font-weight:bold;
  cursor:pointer;
}
li.tab-selected{
  float:left;
  margin-left:1em;
  padding:0 0.5em;
  background-color:#DDDDDD;
  color:#666666;
  font-weight: bold;
  cursor:pointer;
}
</style>
</head>
<body>
<ul class="tab-container" id="tab-container">
  <li id="tab1" class="tab-selected" onClick="tabselecter(this, '1')">tab 1</li>
  <li id="tab2" class="tab" onClick="tabselecter(this, '2')">tab 2</li>
  <li id="tab3" class="tab" onClick="tabselecter(this, '3')">tab 3</li>
</ul>
<div id="tab-content-container" style="clear:both;">
  <div id="tab-content1">
  text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 
  </div>
  <div id="tab-content2" style="display:none">
  text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 
  </div>
  <div id="tab-content3" style="display:none">
  text 3 text 3 text 3 text 3 text 3 text 3 text 3 text 3 text 3 text 3 text 3 text 3 
  </div>
</div>
</body>
</html>

で、実際の動きはこんな感じです。

tab 1
tab 2
tab 3

text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1
text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1

Verify your Comment

Previewing your Comment

Posted by: |

This is only a preview. Your comment has not yet been posted.

Your comment could not be posted. Error type:

Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.