js实现tab选项卡切换功能


Posted in Javascript onJanuary 13, 2017

话不多说,请看代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  *{
   margin:0;
   padding:0;
   list-style: none;
   box-sizing: border-box;
  }
  .menu{
   position: relative;
   display: flex;
   height: 20px;
   justify-content:space-around;
  }
  .menu span{
   display: block;
   width: 100%;
   height: 100%;
   text-align: center;
  }
  .menu .line{
   position: absolute;
   bottom:0;
   left: 0;
   width: 33.33%;
   height: 1px;
   background: red;
   -webkit-transition: all .2s;
   transition: all .2s;
  }
  .main{
   position: relative;
   width: 100%;
  }
  .main li{
   position: absolute;
   top:0;
   left:0;
  }
  .hide{
   display: none;
  }
  .show{
   display: block;
  }
 </style>
</head>
<body>
 <div class="menu">
   <span>menu1</span>
   <span>menu2</span>
   <span>menu3</span>
   <div class="line"></div>
 </div>
 <ul class="main">
  <li>menu1</li>
  <li class="hide">menu2</li>
  <li class="hide">menu3</li>
 </ul>
<script>
 window.onload=function(){
  var oMenu=document.querySelectorAll(".menu span");
  var oMain=document.querySelectorAll(".main li");
  var oLine=document.querySelector(".line");
  for(var i=0;i<oMenu.length;i++){
   oMenu[i].index=i;
   oMenu[i].onclick=function(){
    var thisIndex=this.index;
    for(var j=0;j<oMain.length;j++){
     oMain[j].style.display="none";
     oMain[thisIndex].style.display="block";
    }
    oLine.style.left=thisIndex*33.33+"%";
   }
  }
 }
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
BootStrap 导航条实例代码
May 18 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
JavaScript undefined及null区别实例解析
Jul 21 Javascript
js制作可以延时消失的菜单
Jan 13 #Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 #Javascript
js实现自动轮换选项卡
Jan 13 #Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 #Javascript
详解angularJs中自定义directive的数据交互
Jan 13 #Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 #Javascript
很棒的一组js图片轮播特效
Jan 12 #Javascript
You might like
php一些公用函数的集合
2008/03/27 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
javaScript同意等待代码实现心得
2011/01/01 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
Django中url的反向查询的方法
2018/03/14 Python
解决python报错MemoryError的问题
2018/06/26 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
python线程中的同步问题及解决方法
2019/08/29 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
python的dict判断key是否存在的方法
2020/12/09 Python
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
个人简历的自荐信
2013/10/23 职场文书
自我鉴定书面格式
2014/01/13 职场文书
市场部管理制度
2014/02/02 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
离职证明范本
2015/06/12 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android