原生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 相关文章推荐
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
JSON格式化输出
Nov 10 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
react中Suspense的使用详解
Sep 01 Javascript
详解JavaScript 异步编程
Jul 13 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
js快速排序的实现代码
2013/12/08 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
使用Python生成XML的方法实例
2017/03/21 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
python实现linux下抓包并存库功能
2018/07/18 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
师范大学毕业自我鉴定
2013/11/21 职场文书
赔偿协议书范本
2014/04/15 职场文书
体育教师研修感悟
2015/11/18 职场文书
初中思想品德教学反思
2016/02/24 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android