基于javascript实现tab切换特效


Posted in Javascript onMarch 29, 2016

本文实例为大家分享了javascript实现tab切换特效代码,供大家参考,具体内容如下

效果图:

基于javascript实现tab切换特效

实现代码:

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

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JQuery 动态扩展对象之另类视角
May 25 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
js分页工具实例
Jan 28 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
基于javascript实现简单的抽奖系统
Apr 15 #Javascript
基于javascript实现九宫格大转盘效果
May 28 #Javascript
全屏js头像上传插件源码高清版
Mar 29 #Javascript
js闭包引起的事件注册问题介绍
Mar 29 #Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 #Javascript
js滚动条平滑移动示例代码
Mar 29 #Javascript
JavaScript头像上传插件源码分享
Mar 29 #Javascript
You might like
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
php中用数组的方法设置cookies
2011/04/21 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
详解php协程知识点
2018/09/21 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
村干部培训班主持词
2014/03/28 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android