原生JS与jQuery编写简单选项卡
作者：看五分钟佩奇的小姑姑 发布时间：2024-04-30 09:52:52
标签：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>
来源：http://blog.csdn.net/Aloe_904/article/details/78362693
0
投稿猜你喜欢
- 误区 #7:一个数据库可以存在多个镜像 错误 这个误区就有点老生常谈了。每一个主体服务器只允许一个镜像服务器。如果你希望存在多个主体服务器的
本文实例为大家分享了Python人脸识别的具体代码，供大家参考，具体内容如下1.利用opencv库sudo apt-get install- 1、简介：Oracle的sql*plus是与oracle进行交互的客户端工具。在sqlplus中，可以运行sqlplus命令与sqlplus
- # -*- coding: utf-8 -*- import numpy as npimport matplotlib.pyplot as
- 废话不多说，直接上代码Python2.7#!/usr/bin/env python2.7# -*- coding=utf-8 -*-impo
- 前言问题：做requests请求时遇到如下报错：{“code”:“500&
- 安装Go1.15版本 大纲 Windows安装GoLinux安装GoMacOS安装GoDocker安装Go总结视频地址：https://ww
- 今天在pycharm中手贱，点击了项目exclude，直接懵逼，项目东西找不到了，奶奶的如图一番操作后如图所示，捣鼓了很久，恢复方法点击se
- 神奇创意相框！ 是的，主要利用position的relative, absolute, z-index属性。结合Photo Frame（相框
- 本文实例为大家分享了React实现表格选取的具体代码，供大家参考，具体内容如下在工作中，遇到一个需求，在表格中实现类似于Excel选中一片区
- 本文实例讲述了Python使用sklearn实现的各种回归算法。分享给大家供大家参考，具体如下：使用sklearn做各种回归基本回归：线性、
- 最近在为公司做一个门户网站,项目并不咋D,可规划却不小.在做的过程中就发现修改占了很大的工作量.于是就开始想了想如何使前端修改轻松一些.这个
- 这里首先给出来我很早之前写的一篇博客，Python实现去除列表中重复元素的方法小结【4种方法】，感兴趣的话可以去看看，今天是在实践过程中又积
- 同伪类的方式类似，伪元素通过对插人到文档中的虚构元素进行触发，从而达到某种效果。在CSS1里，有两个伪元素，即：first-letter和f
- <input type=button value=刷新 onclick="hist
- 感谢XP提供的代码！
- 在代码首行添加：％matplotlib inline即可。补充知识：jupyter不能显示Matplotlib 动画看莫烦老师的matplo
- 前言深度学习涉及很多向量或多矩阵运算，如矩阵相乘、矩阵相加、矩阵-向量乘法等。深层模型的算法，如BP，Auto-Encoder，CNN等，都
- 深度学习这个词指的是训练神经网络。深代表着非常大的神经网络。那么神经网络到底是什么呢?看了这篇文章后你就会有很直观的认识了。我们从一个房价预
- 以下是我做美工的两年生活中一条条总结出来的经验，每一点都是我常用的，虽然不是什么大学问，但我觉得要互相学习才能提高，所以现在拿出来和大家一起
