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 相关文章推荐
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 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实现的四则运算表达式计算实现代码
2011/08/02 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
dojo 之基础篇
2007/03/24 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python的Django框架中的Context使用
2015/07/15 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
Python如何定义接口和抽象类
2020/07/28 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
电大自我鉴定
2013/10/27 职场文书
挂牌仪式主持词
2014/03/20 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
物流管理专业求职信
2014/05/29 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
用Python提取PDF表格的方法
2021/04/11 Python