js选项卡切换实战 -

cscoder

浏览: 15929 次
性别:

最近访客更多访客>>

lenovo20142018

wd1282988143

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

js选项卡切换实战

<!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>

分享到：