js选项卡切换实战

来源：互联网发布：mysql alias 编辑：程序博客网时间：2024/05/16 08:15
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>实践题 - 选项卡</title>    <style type="text/css">     /* CSS样式制作 */       *{margin: 0;      padding: 0;}      body{      padding-top: 300px;     }     #xxk{      width: 340px;      margin:0 auto;     }     .title{      width: 60px;      height: 30px;      display:inline-block;      margin-left: 10px;      border:2px solid #dbdbdb;      text-align: center;      line-height: 30px;      border-bottom: none !important;z-index: 1;}     .content{      width: 340px;      height: 100px;      padding: 6px;      border: 1px solid #dbdbdb;      z-index: -1;     }     .content li{      list-style: none;      height: 25px;      font-size: 18px;      line-height: 25px;     }     #JG{      position: absolute;      top:100px;     }     #ESF{      position: absolute;      top: 200px;     }    </style>    <script type="text/javascript">     window.onload=function(){      var fcBtn=document.getElementById('fc'),      jgBtn=document.getElementById('jg'),      esfBtn=document.getElementById('esf'),      content=document.getElementById('content'),      colorObj=fcBtn;      colorObj.style.background='#FF8C00';      content.innerHTML="<li>275万购昌平邻铁三居 总价20万买一居</li><li>200万内购五环三居 140万安家东三环</li><li>北京首现零首付楼盘 53万购东5环50平</li><li>京楼盘直降5000 中信府 公园楼王现房</li>"      fcBtn.onmouseover=function(){      content.innerHTML="<li>275万购昌平邻铁三居 总价20万买一居</li><li>200万内购五环三居 140万安家东三环</li><li>北京首现零首付楼盘 53万购东5环50平</li><li>京楼盘直降5000 中信府 公园楼王现房</li>"      colorObj.style.background='#FFFFFF';      this.style.background='#FF8C00';      colorObj=this;            }      jgBtn.onmouseover=function(){       content.innerHTML="<li>40平出租屋大改造 美少女的混搭小窝</li><li>经典清新简欧爱家 90平老房焕发新生</li><li>新中式的酷色温情 66平撞色活泼家居</li><li>瓷砖就像选好老婆 卫生间烟道的设计</li>"      this.style.background='#FF8C00';      colorObj.style.background='#FFFFFF';      this.style.background='#FF8C00';      colorObj=this;      }      esfBtn.onmouseover=function(){      content.innerHTML="<li>通州豪华3居260万 二环稀缺2居250w甩</li><li>西3环通透2居290万 130万2居限量抢购</li><li>黄城根小学学区仅260万 121平70万抛!</li><li>独家别墅280万 苏州桥2居优惠价248万</li>"      this.style.background='#FF8C00';      colorObj.style.background='#FFFFFF';      this.style.background='#FF8C00';      colorObj=this;      }     }        // JS实现选项卡切换            </script> </head><body><!-- HTML页面布局 --><div id="xxk"><div id="fc" class="title">房产</div><div id="jg" class="title">家居</div><div id="esf" class="title">二手房</div><ul id="content" class="content"></ul></div></body></html>
0 0