自己写的选项卡tab

样式：

<style>
body,div,ul,li{padding:0;margin:0;}
li{list-style:none;}
.tab_mt{
    position:relative;
    width:600px;
    margin:20px 50px;
}
.tab{
    width:600px;
}
.tab li{
    float:left;
    text-align:center;
    background:#FFF;
}
.tab a{
    height:30px;
    line-height:28px;
    padding:0 13px;
    color:#666;
    text-decoration:none;
}

.tab .cur{
    height:33px;
    border-left:1px solid #666;
    border-right:1px solid #666;
    border-top: 2px solid #e4393c;
    border-bottom:none;
    margin-top:-4px;
    margin-bottom:-1px;
}
.tab .cur a{
    color:#e4393c;
}

.tab_mt .tab_content{
    width:600px;
    height:500px;
    border:1px solid #666;
    background:#fff;
    display:none;
}

.tab_mt .cur_content{
    display:block;
}
.clear:after{
    clear:both;
    content:"";
    display:block;
    visibility:hidden;
}
</style>

 

结构部分：

<div class="tab_mt">
    <ul class="tab clear">
        <li class="cur"><a href="#">商品介绍</a></li>
        <li><a href="#">规格参数</a></li>
        <li><a href="#">包装清单</a></li>
        <li><a href="#">商品评价</a></li>
    </ul>
    <div class="tab_content cur_content">
        <p>商品介绍商品介绍商品介绍商品介绍</p>
    </div>
    <div class="tab_content">
        <p>规格参数规格参数规格参数规格参数</p>
    </div>
    <div class="tab_content">
        <p>包装清单包装清单包装清单包装清单</p>
    </div>
    <div class="tab_content">
        <p>商品评价商品评价商品评价商品评价</p>
    </div>
</div>

js代码部分：

window.onload = function(){
    
    var oTab = getByClass(document,"tab_mt")[0];
    var aTabLi = oTab.getElementsByTagName("li");
    var aTabContent = getByClass(oTab,"tab_content");
    
    for(var i = 0 ; i < aTabLi.length ; i++){
        aTabLi[i].index = i;
        aTabLi[i].onmouseover = function(){
            for(var i = 0 ;i<aTabLi.length; i ++){
                removeClass(aTabLi[i],"cur");
                removeClass(aTabContent[i],"cur_content");
            };
            addClass(this,"cur");
            addClass(aTabContent[this.index],"cur_content");
        };
    };
    
    function getByClass(oParent,sClass){
        var aChild = oParent.getElementsByTagName("*"),
            result = [];
        for(var i =0;i<aChild.length;i++){
            if(aChild[i].className.match(new RegExp("(\\s|^)" + sClass+ "(\\s|$)"))){ //判断是否有该class
                result.push(aChild[i]);
            };
        };
        return result;
    };
    
    function addClass(obj,sClass){
        var reg = new RegExp("(\\s|^)" + sClass+ "(\\s|$)");
        if(!obj.className.match(reg)){
            obj.className += " " + sClass;
        };
    }
    
    function removeClass(obj,sClass){
        var reg = new RegExp("(\\s|^)" + sClass+ "(\\s|$)");
        if(obj.className.match(reg)){ //判断是否有该class
                obj.className = obj.className.replace(reg,"");
        }else{
            return "alert('没有该class！')"
        };
    };
    
};