选项卡实现

1.选项卡

<div id="big">
  <ul>
    <li class="active">html</li>
    <li>css</li>
    <li>js</li>			
  </ul>
  <div class="container">0</div>
</div>

#big{
  margin: 20px auto;
  width: 500px;
}
ul{
  height: 35px;
  width: 400px;
}
li{
  float: left;
  width: 120px;
  height: 35px;
  margin-right: 5px;
  background: #ccc;
  color: #000;
  text-align: center;
  line-height: 35px;
}
li.active{
  background: grey;
}
li:hover{
  cursor: pointer;
}
.container{
  width: 400px;
  height: 300px;
  background: #ccc;
  border-top: 1px solid #000;
}

var oUl = document.getElementById('big');
var aLi = oUl.getElementsByTagName('li');
var aDiv = oUl.getElementsByTagName('div');
for(var i=0;i<aLi.length;i++){
  (function (index){
    aLi[i].onclick = function(){
      //alert(index);
      aDiv[0].innerHTML = index;
      for(var j=0;j<aLi.length;j++){
        aLi[j].className = '';
      }
      aLi[index].className = 'active';
    };			
  })(i);
}

2.选项卡2

<div id="container">
  <ul id="tab">
    <li class="active">js</li>
    <li>css</li>
    <li>html</li>
  </ul>
  <div id="content">
    <div class="active">js</div>
    <div>css</div>
    <div>html</div>
  </div>
</div>

#container{
  width: 500px;
  margin: 50px auto;
}
#tab{
  height: 35px;
}
#tab li{
  float: left;
  width: 120px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #000;
  background: #ccc;
  margin-right: 5px;
  cursor: pointer;
}
#tab li.active{
  background: #666;
}
#content{
  width: 400px;
  height: 250px;
  background: #ccc;
  border-top: 1px solid #000;
}
#content div{
  width: 100%;
  height: 100%;
  display: none;
}
#content div.active{
  display: block;
}

oUl = document.getElementById('tab');
aLi = oUl.getElementsByTagName('li');
oContent = document.getElementById('content');
aDiv = oContent.getElementsByTagName('div');

for(var i=0;i<aLi.length;i++){
  aLi[i].index = i;
  aLi[i].onclick = function(){
    for(var j=0;j<aLi.length;j++){
      aLi[j].className = '';
      aDiv[j].className = '';
    }
    aDiv[this.index].className = 'active';
    this.className = 'active';
  };
}