标签：js,选项卡
本文实例为大家分享了js实现选项卡效果的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
window.onload=function(){
var ob = document.getElementById('div1');
var ob1 = div1.getElementsByTagName('input');
var ob2= div1.getElementsByTagName('div');
for(var i = 0;i< ob1.length;i++){
ob1[i].index=i;
ob1[i].onmouseover=function(){
for(var i = 0;i< ob1.length;i++){
ob2[i].style.display='none';
ob1[i].className='';
}
this.className='active';
ob2[this.index].style.display='block';
}
ob1[i].onmouseout=function(){
for(var i=0 ; i< ob1.length;i++){
ob2[i]['style']['display']='none';
}
}
}
};
</script>
<body>
<style type="text/css">
#div1 div{
width: 100px;
height: 100px;
border-top: 2px solid grey;
background-color: #ccc;
}
.active {
background-color: yellow;
}
</style>
<div id="div1">
<input type="button" value="1" class="active">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<div style="display:block;" >1111</div>
<div style="display: none;">2222</div>
<div style="display: none;">3333</div>
<div style="display: none;">4444</div>
</div>
</body>
</html>
如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
来源：https://blog.csdn.net/weixin_44763595/article/details/104698186
0
投稿猜你喜欢
前言最近学习了 django 的一个 restframework 框架，对于里面的执行流程产生了兴趣，经过昨天一晚上初步搞清楚了执行流程（部- 转眼又到了咱们中国传统的情人节七夕了，今天笔者就带大家来领略一下用Python表白的方式。让程序员的恋人们感受一下IT人的浪漫。
- 定义变量什么是变量？在程序运行过程中，其值可以改变的量变量的定义？在 python 中,每个变量在使用前都必须赋值,变量赋值以后该变量才会被
- 1、查找字符串除了使用index()方法在字符串中查找指定元素，还可以使用find()方法在一个较长的字符串中查找子串。如果找到子串，返回子
- 这年头，信息和获得信息的渠道越来越多。随着信息量的增大，先有了分类，又有了导航，再有了搜索，后面的发展还不得而知。在此只是根据平日的所看所想
- openpyxl打开的文件是否需要关闭如果是只读或者只写的模式下，是需要再调用close()方法关闭workbook，正常的情况下是不需要调
- 在我们学习的过程中会遇到这么样的问题，就是在我们学习的过程中会发现需要分页处理，这里呢，给大家介绍书上说的分页。@app.route(
- LMDB的全称是Lightning Memory-Mapped Database(快如闪电的内存映射数据库)，它的文件结构简单，包含一个数据
- 世上无难事，只要找到 Homebrew 的正确安装方式。Homebrew 是什么Homebrew是 mac的包管理器，仅需执行相应的命令,就
- 前言问题需求：拥有两个文件夹，一个保存图片image，一个保存标签文件，要求把标签文件中的标注提取出来，并在图片中画出来相应的思路首先提出各
- 使用web.py做http server开发时，遇到postman能够正常请求到数据，但是浏览器无法请求到数据，查原因之后发现是跨域请求的问
- 第一种：拼接字符串，可以解决问题，但是为了避免sql注入，不建议这样写还是看看第二种：使用.format()函数，很多时候我都是使用这个函数
- 在我的前一篇教程《九宫格基本布局》中，我介绍了用相对定位加绝对定位的方法来制作九宫格的基本布局。这是一种比较符合人们惯性思维的方法，好像制作
- 以下实验是我在百度公司实习的时候做的，记录下来留个小经验。多GPU训练cifar10_97.23 使用 run.sh 文件开始训练cifar
- 绿色在黄色和蓝色（冷暖）之间，属于较中庸的颜色，这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是
- 本文实例讲述了Python使用爬虫爬取静态网页图片的方法。分享给大家供大家参考，具体如下：爬虫理论基础其实爬虫没有大家想象的那么复杂，有时候
- 效果图：作用：将页面中的电话号码生成图片格式。<％Public Sub Com_CreatValidCode(pT
- 一、函数的定义及其应用 所谓函数，就是把具有独立功能的代码块组织成为一个小模块，在需要的时候调用函数的使用包含两个步骤1.定义函数–封装独立
- 前言问题：做requests请求时遇到如下报错：{“code”:“500&
- 本文实例讲述了Python实现统计给定字符串中重复模式最高子串功能。分享给大家供大家参考，具体如下：给定一个字符串，如何得到其中重复模式最高
