css、js实现图示选项卡效果

 

HTML部分：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选项卡</title>


/*CSS代码*/

<style type="text/css"></style>

/*JS代码*/

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

css部分：

*{padding:0px;margin:0px;font:14px normal "微软雅黑";color:#000000;}
#tabs{width:290px;height:150px;background-color:#fff;margin:auto;}
#tabs ul{text-decoration:none;list-style-type:none;display:block;height:30px;line-height:30px;border-bottom:2px solid saddlebrown;padding:2px;}
#tabs ul li{width:60px;height:30px;margin:0 3px;cursor:pointer;float:left;border:1px solid #ccc;border-bottom:none;text-align:center;display:inline-block;background-color:#fff;}
#tabs ul li.on{border-top:2px solid saddlebrown;border-bottom:3px solid #fff;}
#tabs div{border:1px solid #ccc;border-top:none;padding:5px;}
.hide{display:none;}

js部分：

window.onload=function(){
    var oTabs=document.getElementById("tabs");
    var oUl=oTabs.getElementsByTagName("ul")[0];
    var oLis=oUl.getElementsByTagName("li");
    var oDiv=oTabs.getElementsByTagName("div");
    for(var i=0,len=oLis.length;i<len;i++){//遍历所有li
        oLis[i].index=i;//为数组oLis[i]的每i个对象设置i这个值
        oLis[i].onclick=function(){//添加onclick事件
            for(var n=0;n<len;n++){//初始化每个li,出去他们的样式
                oLis[n].className="";
                oDiv[n].className="hide";
            }
            this.className="on";//添加样式
            oDiv[this.index].className="";//为对应的div添加样式
        }
    }
    }

 

posted @ 2017-03-23 17:22  陈百威博客  阅读(552)  评论(0)    收藏  举报