[置顶] HTML+Css写一个简单的选项卡

下面是代码实现之后的效果：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>选项卡制作</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,li{list-style: none;}
.box{width: 400px;margin: 20px auto;}
.hide{display: none;}
#head {height: 25px;border-bottom: 1px solid blue;}

#head li{float: left;width: 80px;height: 24px;line-height: 24px;
margin: 0 4px;text-align: center;border: 1px solid blue;
border-bottom: none;background-color: #f5f5f5;cursor: pointer;}
#box2{border:1px blue solid;border-top: none;padding: 20px;}
#head .working{position:relative;height:25px;margin-bottom:-1px;background-color: #fff;}
</style>

    <script type="text/javascript">
        window.onload=function()
        {
            var hNode=document.getElementsByTagName("li");
            var info=document.getElementById("box2").getElementsByTagName("div");
            for(var i=0;i<hNode.length;i++)
            {
                hNode[i].index=i;
                hNode[i].onmousemove=function()
                {
                    for(var j=0;j<hNode.length;j++){
                        hNode[j].className="";
                        info[j].className="hide"
                    }
                    hNode[this.index].className="working";
                    info[this.index].className="";
                }
            }
        }     

    </script>

</head>
<body>
<!-- HTML页面布局 -->
<div class="box">    
    <ul id="head">
        <li class="working">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div id="box2">
        <div>275万购昌平邻铁三居 总价20万买一居<br>
            200万内购五环三居 140万安家东三环<br>
            北京首现零首付楼盘 53万购东5环50平<br>
            京楼盘直降5000 中信府 公园楼王现房<br>
        </div>
        <div class="hide">
            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>   
</div>
</body>
</html>
秒客网

[置顶] HTML+Css写一个简单的选项卡

相关文章
