基于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 相关文章推荐
JavaScript学习历程和心得小结
Aug 16 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
BootStrap中的表单大全
Sep 07 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
javascript 解析url的search方法
2010/02/09 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
python实现图片转字符画的完整代码
2021/02/21 Python
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
给医务人员表扬信
2014/01/12 职场文书
《画风》教学反思
2014/04/16 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
Nginx进程调度问题详解
2021/09/25 Servers