原生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 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
angular directive的简单使用总结
May 24 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
express框架下使用session的方法
Jul 31 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 Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python中cPickle用法例子分享
2014/01/03 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python如何获取服务器硬件信息
2017/05/11 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
python写入文件自动换行问题的方法
2019/07/05 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
开业庆典邀请函
2014/01/08 职场文书
村干部培训班主持词
2014/03/28 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
卖车协议书范例
2014/09/16 职场文书
公司周年庆典标语
2014/10/07 职场文书
小学教育见习报告
2014/10/31 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书