原生JS与jQuery编写简单选项卡


Posted in jQuery onOctober 30, 2017

本文实例为大家分享了JS编写简单选项卡的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery选项卡</title>
  <style type="text/css">
  #div1 div{width: 200px;height: 200px;border: 1px red solid;display: none;}
  .active{background:#999;}
  </style>

  <!-- 原生的JS -->
  <script type="text/javascript">
  window.onload=function(){
    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='';
        }

        this.className='active';
        aCon[this.index].style.display='block';
      }
    }
  }
  </script>


  <!-- jquery写法 -->
  <script type="text/javascript" src='../jquery-3.2.1.min.js'></script>
  <script type="text/javascript">
  $(function(){
    $('#div1').find('input').click(function(){
      $('#div1').find('input').attr('class','');
      $('#div1').find('div').css('display','none');
      $(this).attr('class','active');
      $('#div1').find('div').eq($(this).index()).css('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;">11111</div>
    <div>22222</div>
    <div>33333</div>
  </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
简单实现jQuery弹窗效果
Oct 30 #jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 #jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 #jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 #jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 #jQuery
jquery ajax异步提交表单数据的方法
Oct 27 #jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 #jQuery
You might like
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
python 遍历pd.Series的index和value
2019/11/26 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
中英文求职信范文
2014/01/27 职场文书
学生安全责任书模板
2014/07/25 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
学历证明范文
2015/06/16 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
java设计模式--七大原则详解
2021/07/21 Java/Android
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
详解Python内置模块Collections
2022/03/22 Python