结果，如图

为了明显，用绿色+红色

第一步：静态布局

先写html代码和css样式

要点一：  ul li都为块级元素，可以用height，但是里面字体不居中，我们用line-height，即达到居中，又设定行高。

要点二：ul的高度与要显示的选项li的高度相等，因为li要把ul的底边掩盖掉。其他不显示的li的行高设置ul的高度-1，留出1个像素的底边显示。

    
     
        
      
            
       
选项1
            
       
选项2
            
       
选项3
            
       
选项4
        
      
        
      
            
       
                        内容1
       
            
       
                        内容2
       
            
       
                        内容3
       
            
       
                        内容4
       
        
      
    
     

　第二步：切换

要点一，页面加载时，给选项卡加一个额外的“索引”属性并赋值，以做选项卡和内容的对应。方法是.index=值。

要点二，点击选项时，利用jQuery链式编程，选项：去掉所有li的的active类样式，再为点击的li加上active类样式。内容：所有div加上hide类样式，再为点击的div去掉hide类样式。

　纯js的写法

window.onload = function () {            var tab_t = document.getElementById("tab-title");            var tab_t_li = tab_t.getElementsByTagName("li");            var tab_c = document.getElementById("tab-content");            var tab_c_li = tab_c.getElementsByTagName("div");            var len = tab_t_li.length;            var i = 0;            for (i = 0; i < len; i++) {                tab_t_li[i].index = i;                tab_t_li[i].onclick = function () {                    for (i = 0; i < len; i++) {                        tab_t_li[i].className = '';                        tab_c_li[i].className = 'hide';                    }                    tab_t_li[this.index].className = 'active';                    tab_c_li[this.index].className = '';                }            }        }

　全部代码

                    
         
     
        
      
            
       
选项1
            
       
选项2
            
       
选项3
            
       
选项4
        
      
        
      
            
       
                        内容1
       
            
       
                        内容2
       
            
       
                        内容3
       
            
       
                        内容4