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 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
JS使用H5实现图片预览功能
Sep 30 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
VFP与其他应用程序的集成
2006/10/09 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
总结Python编程中三条常用的技巧
2015/05/11 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
使用python绘制二维图形示例
2019/11/22 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
马智宇结婚主持词
2014/04/01 职场文书
《迟到》教学反思
2016/02/24 职场文书