www.qjdy.com-奇迹赌场 > 佳美特设计 > 希望对大家的学习有所帮助

原标题:希望对大家的学习有所帮助

浏览次数:116 时间:2019-07-11

正文实例为我们大快朵颐了javascript达成tab切换特效代码,供大家参照他事他说加以考察,具体内容如下

效果图:

图片 1

兑今世码:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="gb2312">
  <title>实践题 - 选项卡</title>
  <style type="text/css">
    *{
      margin:0px;
      padding:0px;
    }
    #tab{
      margin:10px;
    }
    #tab ul{
      list-style:none;
      height:36px;
      border-bottom:2px solid black ;
      display:block;
    }
    #tab ul li{
      float:left;
      display:inline-block;
      padding:0px 15px;
      height:34px;
      line-height:34px;
      margin-right:5px;
      border:1px solid #ccc;
      border-bottom:none;
      cursor:pointer;
    }
    #tab div{
      padding:5px;
      border:1px solid #ccc;
      border-top:none;

    }
    #tab ul li.on{
      border-top:2px solid black;
      border-bottom: 2px solid white;
    }
    .hide{
      display:none;
    }

  </style>
  <script type="text/javascript">
    window.onload=function(){
     var mytab =document.getElementById("tab");
     var myul=mytab.getElementsByTagName("ul")[0];
     var myli=myul.getElementsByTagName("li");
     var mydiv=mytab.getElementsByTagName("div");
    // alert(mydiv.length)
     for(i=0,len=myli.length;i<len;i  ){
       myli[i].index=i;
       myli[i].onclick=function(){
         for(var n=0;n<len;n  ){
           myli[n].className="";
           mydiv[n].className="hide";
         }
         this.className="on";         
         mydiv[this.index].className="";

       }
     }
    }

  </script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab">
  <ul>
    <li class="on">房产</li>
    <li>家居</li>
    <li>二手房</li>
  </ul>
  <div>
     275万购昌平邻铁三居 总价20万买一居
    200万内购五环三居 140万安家东三环
    北京首现零首付楼盘 53万购东5环50平
    京楼盘直降5000 中信府 公园楼王现房
  </div>
  <div class="hide">
    40平出租屋大改造 美少女的混搭小窝
   经典清新简欧爱家 90平老房焕发新生
   新中式的酷色温情 66平撞色活泼家居
   瓷砖就像选好老婆 卫生间烟道的设计
  </div>
  <div class="hide">
    通州豪华3居260万 二环稀缺2居250w甩
   西3环通透2居290万 130万2居限量抢购
   黄城根小学学区仅260万 121平70万抛!
   独家别墅280万 苏州桥2居优惠价248万
  </div>
</div>
</body>
</html>

如上正是本文的全部内容,希望对大家的求学抱有帮助。

你也许感兴趣的稿子:

  • 很棒的js Tab选项卡切换效果
  • 最简单易行纯JavaScript完结Tab标签页切换的章程(推荐)
  • javascript贯彻差别颜色Tab标签切换效果
  • 基于javascript完成tab选项卡切换特效调试笔记
  • javascript落到实处tab响应式切换特效
  • 分步剖判JavaScript达成tab选项卡自动切换功效
  • 4种JavaScript达成轻便tab选项卡切换的艺术
  • JavaScript贯彻轻易的tab选项卡切换
  • js中常用的Tab切换效果(推荐)

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:希望对大家的学习有所帮助

关键词:

上一篇:特此分享到脚本之家平台供大家参考

下一篇:没有了