<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
li{
display: inline;
}
li:hover{
background-color: gainsboro;
}
.tab{
width: 400px;
height: 300px;
}
</style>
<body>
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
<li>选项四</li>
</ul>
<div class="cain">
<section class="tab" style="background-color:red">1</section>
<section class="tab" style="background-color:blue">2</section>
<section class="tab" style="background-color:yellow">3</section>
<section class="tab" style="background-color:aqua">4</section>
</div>
<script>
var lis =document.getElementsByTagName("li")
var sec=document.querySelectorAll(".tab")
for(var i=1;i<sec.length;i++){
sec[i].style.display="none"
};
console.log(lis.length)
for(var i=0;i<lis.length;i++){
lis[i].index=i
lis[i].onclick=function(){
for(var a=0;a<sec.length;a++){
sec[a].style.display="none"
}
sec[this.index].style.display='block'
}
}
</script>
</body>
</html>
js实现关灯，防抖动，焦点 时间，选项卡
需积分: 1 71 浏览量
2023-08-24
00:30:30
上传
评论
收藏 8KB RAR 举报
day2.rar （8个子文件） 
day2 
选项卡.html 1KB js 关灯.html 690B img 
bulboff.gif 2KB bulbon.gif 2KB css 防抖动.html 677B 时间.html 720B new_file.html 658B 焦点.html 337B资源评论
一只java小菜鸡
- 粉丝: 2752
- 资源: 145
