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 相关文章推荐
很好用的js日历算法详细代码
Mar 07 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
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笔记 字符串处理
2010/10/19 PHP
跟我学Laravel之路由
2014/10/15 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
php命令行模式代码实例详解
2021/02/26 PHP
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
介绍Python中的fabs()方法的使用
2015/05/14 Python
Python中的hypot()方法使用简介
2015/05/18 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
python skimage 连通性区域检测方法
2018/06/21 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
Python列表切片常用操作实例解析
2020/03/10 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
外贸采购员求职的自我评价
2013/11/26 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
Python基础详解之描述符
2021/04/28 Python