很实用的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 相关文章推荐
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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
网页上facebook分享功能具体实现
2014/01/26 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
javaScript call 函数的用法说明
2010/04/09 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
Python 实现自动导入缺失的库
2019/10/29 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
python 读取.nii格式图像实例
2020/07/01 Python
python实现AdaBoost算法的示例
2020/10/03 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
数据库基础的一些面试题
2012/02/25 面试题
可口可乐广告词
2014/03/20 职场文书
财务会计专业求职信
2014/06/09 职场文书
幼师求职信
2014/06/23 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
单位收入证明范本
2015/06/18 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
MySQL数据管理操作示例讲解
2022/12/24 MySQL