很实用的js选项卡切换效果

2019-11-20 09:15:19

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js实现简单的选项卡切换效果的具体代码，供大家参考，具体内容如下

js选项卡切换代码：

<!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实现网站列表切换效果的2种方法

下一篇：js实现浏览器倒计时跳转页面效果