很实用的js选项卡切换效果


Posted in Javascript onAugust 12, 2016

本文实例为大家分享了js实现简单的选项卡切换效果的具体代码,供大家参考,具体内容如下

很实用的js选项卡切换效果

js选项卡切换代码:

<!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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
javascript中scrollTop详解
Apr 13 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 #Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 #Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 #Javascript
JS实现图片剪裁并预览效果
Aug 12 #Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 #Javascript
分享JS数组求和与求最大值的方法
Aug 11 #Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 #Javascript
You might like
第七节--类的静态成员
2006/11/16 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
简单的python后台管理程序
2017/04/13 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Python 移动光标位置的方法
2019/01/20 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
村官学习十八大感想
2014/01/15 职场文书
销售会议开幕词
2015/01/28 职场文书
西安大雁塔导游词
2015/02/10 职场文书
圆明园观后感
2015/06/03 职场文书
运动员入场前导词
2015/07/20 职场文书
会议简讯范文
2015/07/20 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python