网站地图    收藏   

主页 > 前端 > javascript >

纯JS实现tab选项卡切换效果

来源:未知    时间:2016-08-15 10:57 作者:xxadmin 阅读:

[导读] 今天给大家带来一个纯JS实现的tab选项卡切换效果 js选项卡切换代码如下: !DOCTYPEhtmlhtmlheadmetacharset=gb2312titlejs-选项卡/titlestyletype=text/css*{margin:0px;padding:0px;}#tab{margin:10px;}#tabul{list-style:...

今天给大家带来一个纯JS实现的tab选项卡切换效果


js选项卡切换代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <title>js - 选项卡</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>房产</li>
    <li>家居</li>
    <li>二手房</li>
  </ul>
  <div>
     张三李四万物 张三李四万物 张三李四万物 张三李四万物
  </div>
  <div>
    纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果
  </div>
  <div>
    纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果
  </div>
</div>
</body>
</html>


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论