原生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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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&amp;mysql 日期操作小记
2012/02/27 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP7 新增常量
2021/03/09 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
详解Vue之计算属性
2020/06/20 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
python机器学习实战之树回归详解
2017/12/20 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
python3 flask实现文件上传功能
2020/03/20 Python
python中元组的用法整理
2020/06/15 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
会员卡清退活动总结
2014/08/27 职场文书
悬空寺导游词
2015/02/05 职场文书
产品质量保证书范本
2015/02/27 职场文书
暂停营业通知
2015/04/25 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书