基于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 相关文章推荐
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
基于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中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
PHP 断点续传实例详解
2017/11/11 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
静态页面的值传递(三部曲)
2006/09/25 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
Python 迭代器工具包【推荐】
2016/05/06 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
pandas object格式转float64格式的方法
2018/04/10 Python
Django接收自定义http header过程详解
2019/08/23 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
促销活动策划方案
2014/01/12 职场文书
倡议书范文格式
2014/05/12 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
2014年班级工作总结
2014/11/14 职场文书
nginx请求限制配置方法
2021/07/09 Servers
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers