选项卡

<ul id="tab">
    <li>第一列</li>
    <li>第二列</li>
</ul>
<ul id="tabcell">
    <li>
        <ul>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>2222222</li>
            <li>2222222</li>
            <li>2222222</li>
        </ul>
    </li>
</ul>    

<script type="text/javascript">
    var tab=document.getElementById("tab");
    var tabcell=document.getElementById("tabcell");
    for(var i = 0;i < tab.length;i++){
        tab.children("li")[i].index=i;
        tab.children("li")[i].onclick=function(){
            tabcell.children("li")[i].style.display="none";
        }
        tabcell.children("li")[this.index].style.display="block";
    }
</script>    

2

<ul id="tab">
 2     <li data="100">第一列</li>
 3     <li data="200">第二列</li>
 4 </ul>
 5 <ul id="tabcell">
 6     <li data-value="100">
 7         <ul>
 8             <li>1111111</li>
 9             <li>1111111</li>
10             <li>1111111</li>
11         </ul>
12     </li>
13     <li data-value="200">
14         <ul>
15             <li>2222222</li>
16             <li>2222222</li>
17             <li>2222222</li>
18         </ul>
19     </li>
20 </ul>    

<script type="text/javascript">
    var tab=document.getElementById("tab");
    var tabcell=document.getElementById("tabcell");
    for(var i=0;i<tab.children.length;i++){
        tabcell.children("li").style.display="none";
        tab.children("li").onclick=function(){
            value=this.value;
              for(var j=0;j<tabcell.children.length;j++){
                  if(this.data-value==value){
                        this.style.display="block";
                        break;
                   }  
              }  
        }
    }        
</script>           

随手一些，代码可能运行起来有bug，记录的是思想