原生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插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
深入分析jQuery.one() 函数
Jun 03 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变量引用的面试题
2010/08/08 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
php ci框架验证码实例分析
2013/06/26 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
js创建对象的方式总结
2015/01/10 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
python查询mysql中文乱码问题
2014/11/09 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
python绘制规则网络图形实例
2019/12/09 Python
python字符串下标与切片及使用方法
2020/02/13 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
Python如何定义有可选参数的元类
2020/07/31 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
adidas美国官网:adidas US
2016/09/21 全球购物
毕业生多媒体设计求职信
2013/10/12 职场文书
房地产员工找工作的自我评价
2013/11/15 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
奉献演讲稿范文
2014/05/21 职场文书
党员承诺书格式
2014/05/21 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
国家助学金感谢信
2015/01/21 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
详解Spring事件发布与监听机制
2021/06/30 Java/Android
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫