javascript\html\CSS 选项卡

来源：互联网发布：仿m淘宝登录注册编辑：程序博客网时间：2024/05/17 23:36
效果：
代码：
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>选项卡</title>    <style type="text/css">     /* CSS样式制作 */      .tabStyle{        list-style:none;        padding-left:5px;        margin-bottom:-2px;    }    .tabStyle li.libefore{        display:inline-block;        margin-left:10px;        border:1px solid gray;        padding:8px 15px;        border-bottom:0px;        cursor:pointer;            }    .tabStyle li.liafter{        display:inline-block;        margin-left:10px;        border:1px solid gray;        padding:8px 15px;        border-bottom:2px solid white;        border-top:2px solid brown;        cursor:pointer;            }        .contentStyle{        border:1px solid blue;        padding-left:10px;        width:300px;        display:none;    }    .contentStyleClicked{        border:1px solid blue;        padding-left:10px;        width:300px;        display:block;        border-top: 2px solid brown;    }           </style>    <script type="text/javascript">             // JS实现选项卡切换    window.onload=function(){        var tabs=document.getElementById("tabs").getElementsByTagName("ul")[0].getElementsByTagName("li");        var divs=document.getElementById("tabs").getElementsByTagName("div");                for(var i=0;i<tabs.length;i++){            (function(X){                tabs[X].onclick=function(){                    var divLength=divs.length;                    for(var j=0;j<divLength;j++){                        divs[j].className="contentStyle";                                    tabs[j].className="libefore";                    }                    this.className="liafter";                    divs[X].className="contentStyleClicked";                };             })(i);        }    }    </script> </head><body><!-- HTML页面布局 -->    <div id="tabs">        <ul class="tabStyle" >            <li class="liafter">房产</li>            <li class="libefore">家居</li>            <li class="libefore">二手房</li>        </ul>        <div class="contentStyleClicked">            <p>275万购昌平邻铁三居 总价20万买一居</p>            <p>200万内购五环三居 140万安家东三环</p>            <p>北京首现零首付楼盘 53万购东5环50平</p>            <p>京楼盘直降5000 中信府 公园楼王现房</p>        </div>        <div class="contentStyle">            <p>40平出租屋大改造 美少女的混搭小窝</p>            <p>经典清新简欧爱家 90平老房焕发新生</p>            <p>新中式的酷色温情 66平撞色活泼家居</p>            <p>瓷砖就像选好老婆 卫生间烟道的设计</p>        </div>        <div class="contentStyle">            <p>通州豪华3居260万 二环稀缺2居250w甩</p>            <p>西3环通透2居290万 130万2居限量抢购</p>            <p>黄城根小学学区仅260万 121平70万抛!</p>            <p>独家别墅280万 苏州桥2居优惠价248万</p>        </div>    </div></body></html>
0 0