原生JS写选项卡

来源：互联网发布：p2p摄像头软件下载编辑：程序博客网时间：2024/06/04 19:53

封装两个方法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;    }

阅读全文

0 0