您的位置:68399皇家赌场 > 服务器租用 > JS实现淡石磨蓝简洁竖向Tab点击切换效果

JS实现淡石磨蓝简洁竖向Tab点击切换效果

发布时间:2019-07-13 06:50编辑:服务器租用浏览(148)

    上述正是本文的全体内容,希望对我们学习javascript程序设计有所援救。

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

    运转作效果果截图如下:

    八个无需jQuery完结的tab选项卡切换效果,代码简洁易用。
    默许是鼠标悬停突显tab效果,可将内部的onmouseover 修改为 onclick 点击效果

    body{margin:0;font-family:"microsoft yahei";font-size:13px;line-height:1.5;background:#eee;} 
    .wrap{margin:0 auto 0 auto;} 
    .tabs{height:25px;} 
    .tabs a{display:block;float:left;width:33.33%;color:#333;text-align:center;background:#eee;line-height:25px;font-size:16px;text-decoration:none;} 
    .tabs a.active{color:#fff;background:#CDC8B1;border-radius:5px 5px 0px 0px;} 
    .swiper-container{background:#CDC8B1;height:100%;border-radius:0 0 5px 5px;width:100%;border-top:0;} 
    .swiper-slide{height:100%;width:100%;background:none;color:#fff;} 
    div.content-slide {padding:40px;display: none;} 
    div.contentin {display: block;} 
    

    效果图:

    www.68399.com,1、将附属类小部件中的index.html中的css样式以及代码部分拷贝到你供给的地点就可以
    有关链接:几行轻松的jQuery代码化解tab标签切换效果

    正文实例讲明了tab响应式切换效果,利用js对体制举办动态切换就可以。 多的不说,请看代码

    以上就是本文的全体内容,希望对大家的就学抱有支持。

    在线演示地址如下:

    动用方法:

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:JS实现淡石磨蓝简洁竖向Tab点击切换效果

    关键词: 68399皇家赌场

上一篇:切磋JavaScript语句的实施进程

下一篇:没有了