简单实现js选项卡切换效果
作者：jerrylsxu 发布时间：2024-05-03 15:05:24
标签：js,选项卡
本文实例介绍了实现js选项卡切换效果的详细代码，分享给大家供大家参考，具体内容如下
思路：
1、获取元素；
2、for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件；
3、点击当前按钮时会以高亮状态显示，通过for循环历遍把所有的按钮样式设置为空在把所有div的display设置为none。
4、点击当前按钮添加样式，把当前div显示出来，display设置为block。
html代码：
<div id="div1">
<input type="button" class="active" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<input type="button" value="4"/>
<div class="div2" style="display:block;">11</div>
<div class="div2">22</div>
<div class="div2">33</div>
<div class="div2">44</div>
</div>
css样式：
.active
{
background:#9CC;
}
.div2
{
width:300px;
height:200px;
border:1px #666666 solid;
display:none;
}
js代码：
<script>
window.onload=function(){
var odiv=document.getElementById('div1');//获取div
var btn=odiv.getElementsByTagName('input');//获取div下的input
var div2=odiv.getElementsByTagName('div') ;//获取div下的div
for(i=0;i<btn.length;i++)//循环每个按钮
{
btn[i].index=i //btn[i]是指定button的第i个按钮;为该按钮添加一个index属性，并将index的值设置为i
btn[i].onclick=function()//按钮的第i个点击事件
{
for(i=0;i<btn.length;i++)//循环去掉button的样式，把div隐藏
{
btn[i].className='' //清空按钮的样式
div2[i].style.display='none'//隐藏div
}
this.className='active'//自身添加active
div2[this.index].style.display='block'//this.index是当前div
}
}
}
</script>
0
投稿猜你喜欢
- 作用：export和export default实现的功能相同，即：可用于导出（暴露）常量、函数、文件、模块等，以便其他文件调用。区别：1、
Python图片处理模块PIL（pillow）pywin32的主要作用1.捕获窗口；2.模拟鼠标键盘动作；3.自动获取某路径下文件列表；4.- 模块是用类编写的，只有一个StringIO类，所以它的可用方法都在类中。此类中的大部分函数都与对文件的操作方法类似。例：#coding=gb
- 应用场景1.需要将大型MP3文件切割成较小的部分以便上传或发送。2.需要从MP3文件中提取特定的音频片段，以便用于其他目的。3.需要快速制作
- 选择排序选择排序（selection sort）是一种原地（in-place)排序算法，适用于数据量较少的情况。由于选择操作是基于
- 进行编程时，一般我们会给一个函数或者变量起一个名字，该名称是用于引用或寻址函数变量。但是有一个低调的函数，你不需要赋予它名字，因此该函数也叫
- 新浪中用来显示flash的函数，格式化后大家可以用啊sinaflash.js/** * @author&n
- 本文教程为大家分享了mysql installer community 8.0.12.0的安装，供大家参考一、下载mysql-install
- 二分类或分类问题，网络输出为二维矩阵：批次x几分类，最大的为当前分类，标签为one-hot型的二维矩阵：批次x几分类计算百分比有numpy和
- 代码中用到了nextpow2，其中n = nextpow2(x) 表示最接近x的2的n次幂。#!/usr/bin/env pythonimp
- python的时间模块生成时间戳的方法是非常简单的，因为最近频繁用到了时间戳功能，这里简单总结了一下日常使用最为频繁的两个时间模块各自生成当
- 安装完 anaconda运行如下代码执行不了import numpy as npimport os,sys#获取当前文件夹，并根据文件名de
- 本文介绍一个用python结合xlsxwriter自动生成业务报表的程序。这里的业务数据采用的是指定的值，真实情况下需要其他程序来接入数据。
- 本文实例为大家分享了python创建单词词库的具体代码，供大家参考，具体内容如下基本思路：以COCA两万单词表为基础，用python爬取金山
- 本文实例讲述了Python爬虫实现“盗取”微信好友信息的方法。分享给大家供大家参考，具体如下：刚起床，闲来无聊，找点事做，看了朋友圈一篇爬取
- 1.删除序列相同元素并保持顺序如果仅仅就是想消除重复元素，通常可以简单的构造一个集合，利用集合之间元素互不相同的特性就可以消除重复，但是这种
- python压缩和解压缩模块之zlib由于早期的zlib和Python之间不兼容，故推荐1.1.4以后的版本。导入zlib后可以查看版本号&
- 刚在虚拟机里面安装了pycharm，配置（setting）完后，新建一个py文件，键入"hello world"，竟然没
- 实验环境 Pytorch 1.7.0torchvision 0.8.2Python 3.8CUDA10.2 + cuDNN v7.
- 在前端开发中，如果需要模拟后端数据，而又不想开发一个后端服务器， 则可以借助mock.js配置一个后端服务器来返回前端需要的数据，本文将会分
