原生js实现选项卡功能


Posted in Javascript onMarch 08, 2017

效果图:

原生js实现选项卡功能

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>原生js选项卡写法</title>
 <style>
  #div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;}
  .active{background: red;}
 </style>
 <script>
  window.onload=function(){//原生js选项卡写法
  var oDiv = document.getElementById('div1');
  var aInput = document.getElementsByTagName('input');
  var aCon = oDiv.getElementsByTagName('div');
  for(var i=0;i<aInput.length;i++){
   aInput[i].index = i;
   aInput[i].onclick = function(){
   for(var i=0;i<aInput.length;i++){
    aInput[i].className = '';
    aCon[i].style.display = 'none';
   }
   this.className= 'active';
   aCon[this.index].style.display = 'block';
   }
  }
  }
 </script>
 </head>
 <body>
 <div id="div1">
  <input class="active" type="button" value="1" />
  <input type="button" value="2"/>
  <input type="button" value="3"/>
  <div style="display: block;">11111111111</div>
  <div>22222222222</div>
  <div>333333333333</div>
 </div>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 Javascript
js, jQuery实现全选、反选功能
Mar 08 #Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 #Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 #Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 #Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 #Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 #Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 #Javascript
You might like
PHP大文件分割分片上传实现代码
2020/12/09 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
python绘图方法实例入门
2015/05/19 Python
Python作用域用法实例详解
2016/03/15 Python
python的变量与赋值详细分析
2017/11/08 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
社会实践心得体会
2014/01/03 职场文书
工作个人的自我评价
2014/01/14 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
教师节感想
2015/08/11 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python