基于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中find()方法用法实例
Jan 07 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
php自定义session示例分享
2014/04/22 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
mac上配置Android环境变量的方法
2018/07/08 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
Python中turtle库的使用实例
2019/09/09 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
Java程序员面试题
2013/07/15 面试题
销售心得体会
2014/01/02 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
长城导游词300字
2015/01/30 职场文书
电工生产实习心得体会
2016/01/22 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书