脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS与jQuery编写简单选项卡

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

 更新时间：2017年10月30日 09:18:18   作者：看五分钟佩奇的小姑姑  
这篇文章主要为大家详细介绍了原生JS与jQuery编写简单选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • apply和call方法定义及apply和call方法的区别

    apply和call方法定义及apply和call方法的区别

    apply和call功能一样，只是传入的参数列表形式不同，本文给大家介绍apply和call方法定义及apply和call方法的区别，感兴趣的朋友一起学习吧
    2015-11-11
  • 解决layui 三级联动下拉框更新时回显的问题

    解决layui 三级联动下拉框更新时回显的问题

    今天小编就为大家分享一篇解决layui 三级联动下拉框更新时回显的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 详解ES6中的Map与Set集合

    详解ES6中的Map与Set集合

    这篇文章主要介绍了详解ES6中的Map与Set集合，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • JavaScript实现复选框全选和取消全选

    JavaScript实现复选框全选和取消全选

    这篇文章主要为大家详细介绍了JavaScript实现复选框全选和取消全选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JavaScript 函数式编程实践(来自IBM)

    JavaScript 函数式编程实践(来自IBM)

    说到函数式编程，人们的第一印象往往是其学院派，晦涩难懂，大概只有那些蓬头散发，不修边幅，甚至有些神经质的大学教授们才会用的编程方式。
    2010-06-06
  • javascript 数组排序函数

    javascript 数组排序函数

    javascript的数组排序函数 sort方法，默认是按照ASCII 字符顺序进行升序排列。
    2009-08-08
  • javascript获取div的内容 精华篇

    javascript获取div的内容 精华篇

    用js获取div的内容的方法，其实原理就是利用innerText或innerHTML
    2009-05-05
  • js数据类型以及其判断方法实例

    js数据类型以及其判断方法实例

    这篇文章主要给大家介绍了关于js数据类型以及其判断方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 使用js实现雪花飘落效果

    使用js实现雪花飘落效果

    以下是对使用js实现雪花飘落的效果进行了介绍。需要的朋友可以 过来参考下
    2013-08-08
  • JavaScript通过setTimeout实时显示当前时间的方法

    JavaScript通过setTimeout实时显示当前时间的方法

    这篇文章主要介绍了JavaScript通过setTimeout实时显示当前时间的方法,涉及javascript操作时间显示的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04

最新评论