原生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代码

<!-- 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; i<len;i++){
            tabs_lis[i].index = i;

            tabs_lis[i].onclick = function(){
                for(var j = 0;j<len;j++){
                    deleteClass(tabs_lis[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;
    }