很实用的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 相关文章推荐
javascript的对话框详解与参数
Mar 08 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 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
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
javascript实现下雨效果
2017/03/27 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
Python3使用requests发闪存的方法
2016/05/11 Python
Python中字符串的处理技巧分享
2016/09/17 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
时尚圣经:The Fashion Bible
2019/03/03 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
甲方资料员岗位职责
2013/12/13 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
森林防火宣传标语
2014/06/27 职场文书
个人融资协议书
2014/10/02 职场文书
大学军训通讯稿
2015/07/18 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js