HTML+Css写一个简单的选项卡

来源：互联网发布：淘宝pid怎么看编辑：程序博客网时间：2024/06/07 19:06
下面是代码实现之后的效果：
代码如下：
<!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>
1 0