很实用的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 相关文章推荐
潜说js对象和数组
May 25 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
vue debug 二种方法
Sep 16 Javascript
eslint 的三大通用规则详解
May 16 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 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
php连接mysql数据库代码
2009/03/10 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
职业技术学校毕业生推荐信
2013/12/03 职场文书
机械工程师岗位职责
2014/06/16 职场文书
告知书格式
2015/07/01 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
springboot中的pom文件 project报错问题
2022/01/18 Java/Android