原生JS写选项卡

封装两个方法deleteClass；addClass

        //给元素添加className
        function addClass(elem,value){
                if(!elem.className){
                    elem.className = value; //如果元素没有class，直接加
                }else{
                    var newClassName = elem.className;//如果元素已有class，追加
                    newClassName +=" ";
                    newClassName +=value;
                    elem.className = newClassName;  
                }
        }
        //给元素删除className
        function deleteClass(elem,value){
                var newClassName = elem.className;
                if(newClassName.indexOf(value)){//查找元素是否有需要删除的class
                    elem.className = newClassName.replace(value," ");//如果有，则替换掉
                }
        }

HTML代码

<div id="tabs">
    <ul id="lists">
        <li class="abc active">房产li>
        <li class="abc">家居li>
        <li class="abc">二手房li>
    ul>
    <div class="hide active">
        275万购昌平邻铁三居 总价20万买一居br>
         200万内购五环三居 140万安家东三环br>
        北京首现零首付楼盘 53万购东5环50平br>
        京楼盘直降5000 中信府 公园楼王现房br>
    div>
    <div class="hide active">
        40平出租屋大改造 美少女的混搭小窝br>
        经典清新简欧爱家 90平老房焕发新生br>
        新中式的酷色温情 66平撞色活泼家居br>
        瓷砖就像选好老婆 卫生间烟道的设计br>
    div>
    <div class="hide"> 
        通州豪华3居260万 二环稀缺2居250w甩br>
        西3环通透2居290万 130万2居限量抢购br>
        黄城根小学学区仅260万 121平70万抛!br>
        独家别墅280万 苏州桥2居优惠价248万br>
    div>
div>

body>

JS代码

  // JS实现选项卡切换
    window.onload = function(){
        //获取tabs下的所有div
        var tabs = document.getElementById("tabs");
        var tabs_divs = tabs.getElementsByTagName("div");
        //获取lists下的所有li
        var tabs_ul = document.getElementById("lists");
        var tabs_lis = tabs_ul.getElementsByTagName("li");  

            //给元素添加className
        function addClass(elem,value){
                if(!elem.className){
                    elem.className = value; //如果元素没有class，直接加
                }else{
                    var newClassName = elem.className;//如果元素已有class，追加
                    newClassName +=" ";
                    newClassName +=value;
                    elem.className = newClassName;  
                }
        }
        //给元素删除className
        function deleteClass(elem,value){
                var newClassName = elem.className;
                if(newClassName.indexOf(value)){//查找元素是否有需要删除的class
                    elem.className = newClassName.replace(value," ");//如果有，则替换掉
                }
        }


        for(var i =0,len = tabs_lis.length; ifunction(){
                for(var j = 0;j"active");
                    deleteClass(tabs_divs[j],"active")
                }
                addClass(this,"active");
                addClass(tabs_divs[this.index],"active")
            }
        }

    } 

CSS代码

 /* CSS样式制作 */  
     body{
            margin:0;
            padding:10px;
     }
     #tabs {
            width:400px;
            height:200px;
    }
     #tabs ul {
            list-style:none;
            display:block;
            height:30px;
            line-height:30px;
     }

      #tabs ul li {
            list-style:none;
            float:left;
            width:90px;
            height:30px;
            margin-left:2px;
            border:1px solid #ffccff;
            text-align:center;
            background-color:#fff;
            cursor:pointer;
       }
       #lists .active {
            border-top:2px solid red;
            border-bottom:2px solid #fff;
     }
     #tabs div {            
            width:300px;
            height:110px;
            margin-top:-13px;
            margin-left:34px;
            padding:15px;
            border:1px solid #369;
     } 
     #tabs .hide{
        display:none;
     }
    div .active{
        display:block !important;
    }