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 相关文章推荐
javascript下string.format函数补充
Aug 24 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
javascript实现标签切换代码示例
May 22 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
CocosCreator入门教程之网络通信
Apr 16 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中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
IE 当eval遇上function的处理
2011/08/09 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
cookie的secure属性详解
2015/04/08 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
Angular 表单控件示例代码
2017/06/26 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
python3 map函数和filter函数详解
2019/08/26 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
Python hashlib模块实例使用详解
2019/12/24 Python
如何在sublime编辑器中安装python
2020/05/20 Python
python3处理word文档实例分析
2020/12/01 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
市场营销专科应届生求职信
2013/11/24 职场文书
会计找工作求职信范文
2013/12/09 职场文书
企划主管岗位职责
2013/12/12 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
公司承诺书格式范文
2015/04/28 职场文书
2015年国庆节标语大全
2015/07/30 职场文书