tab选项卡功能
今天给大家实现一个简单的需求,原生态js实现选项卡切换的效果,即当鼠标移入某个标签时,显示不同的图片。先来看一下效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab选项卡功能</title>
<style type="text/css">
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
ul{
overflow: hidden;
}
li{
width: 110px;
height: 40px;
background-color: #eee;
border: 1px solid #ccc;
float: left;
line-height: 40px;
text-align: center;
}
div{
width: 400px;
height: 400px;
border: 1px solid #ccc;
}
img{
width: 400px;
height: 400px;
display: none;
}
</style>
</head>
<body>
<ul>
<li>夜灯</li>
<li>陶瓷</li>
<li>路飞</li>
<li>花朵</li>
<li>福年</li>
</ul>
<div>
<img src="img/asdf.jpg"style="display: block;"/>
<img src="img/mnbvc.jpg"/>
<img src="img/poiu.jpg"/>
<img src="img/qwer.jpg"/>
<img src="img/zxcv.jpg"/>
</div>
<script type="text/javascript">
//逻辑：1.移动到那个选项卡上面，自己的背景颜色要改变
//2.对应的内容区域要显示
//移出时，背景颜色恢复，对应内容区域隐藏
let lii = document.getElementsByTagName('li');
let imgg = document.getElementsByTagName('img');
for(let i = 0;i<lii.length;i++){
//先进行元素数组 下标的设置
lii[i].index = i;
lii[i].onmouseover = function(){
this.style.backgroundColor = 'yellow';
//先将所有照片影藏，再让对应的图片出现
for(let j = 0;j<imgg.length;j++){
imgg[j].style.display = 'none';
}
imgg[this.index].style.display='block';
}
lii[i].onmouseout = function(){
lii[i].style.backgroundColor = '#eee';
//imgg[this.index].style.display = 'none';
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
