HTML Tab选项卡

我要做的效果如图所示：

代码如下：

index.html

    
    
    
    


    
    

        
        

            

                
公告
                
规则
                
完美
                
功劳
                
产品
                
            
        
        
        

            

                

                    
数据七夕:金牛爱送玫瑰
                    
阿里打造"互联网监管"
                    
10万家店60万新品
                    
全球最大网上时装周
                
            
            

                

                    

                        “全额返现”要管控啦
                    
                    

                        淘宝新规发布汇总(7月)
                    
                    

                        炒信规则调整意见反馈
                    
                    

                        质量相关规则近期变更
                    
                
            
            

                

                    

                        阿里建商家全链路服务
                    
                    

                        个性化的消费时代来临
                    
                    

                        跨境贸易是中小企业机
                    
                    

                        美妆行业虚假信息管控
                    
                
            
            

                

                    

                        接次文件，毁了一家店
                    
                    

                        账号安全神器阿里钱盾
                    
                    

                        新版阿里110上线了
                    
                    

                        卖家学违禁避免被处罚
                    
                
            
            

                

                    

                        为了公益high起来
                    
                    

                        魔豆妈妈在线申请
                    
                
            
        
    

index.css

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    padding: 0;
    margin: 0;
}


a{
    color: black;
    text-decoration: none;
}
ul{
    list-style: none;
}

#tab{
    width: 498px;
    height: 130px;
    border: 1px solid #ddd;
    box-shadow: 0 0 2px #ddd;
    margin: 100px 0 0 100px;
    /*处理超出的内容*/
    overflow: hidden;
}

/*选项卡的头部*/
#tab-header{
    background-color: #F7F7F7;
    height: 33px;
    text-align: center;
    position: relative;
}
#tab-header ul{
    width: 500px;
    position: absolute;
    left: -1px;
}
#tab-header ul li{
    float: left;
    width: 98px;
    height: 33px;
    line-height: 33px;
    padding: 0 1px;
    border-bottom: 1px solid #dddddd;
}
#tab-header ul li.selected{
    background-color: white;
    font-weight: bolder;
    border-bottom: 0;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    padding: 0;

}

#tab-header ul li:hover{
    color: orangered;
}

/*主要内容*/
#tab-content .dom{
    display: none;
}

#tab-content .dom ul li{
    float: left;
    /*background-color: red;*/
    margin: 15px 10px;
    width: 225px;
}

#tab-content .dom ul li a:hover{
    color: orange;
}

index.js

// == 值比较  === 类型比较 $(id) ---->  document.getElementById(id)
function $(id){
    return typeof id === 'string' ? document.getElementById(id):id;
}

// 当页面加载完毕
window.onload = function(){
    // 拿到所有的标题(li标签) 和 标题对应的内容(div)
    var titles = $('tab-header').getElementsByTagName('li');
    var divs = $('tab-content').getElementsByClassName('dom');
    // 判断
    if(titles.length != divs.length) return;
    // 遍历
    for(var i=0; i