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 最简单的属性菜单
Oct 08 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
树结构之JavaScript
Jan 24 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
JS实现灯泡开关特效
Mar 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
PHP中的加密功能
2006/10/09 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
javascript json 新手入门文档
2009/12/03 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
vue3.0 上手体验
2020/09/21 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
你应该知道的python列表去重方法
2017/01/17 Python
Python获取当前路径实现代码
2017/05/08 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
学习十八届三中全会精神实施方案
2014/02/17 职场文书
大学老师推荐信
2014/02/25 职场文书
三万活动总结
2014/04/28 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
营销学习心得体会
2014/09/12 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
python中os.path.join()函数实例用法
2021/05/26 Python
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python