本文实例为大家分享了js编写选项卡效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head lang="e
本文实例为大家分享了js编写选项卡效果的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
.selectka {
width:500px;
height:400px;
margin:auto;
border:1px solid #09e1ff;
}
.left,.right{
float:left;
height:400px;
}
#menu{
text-align: center;
line-height: 80px;
font-size: 20px;
color:purple;
}
li{
list-style: none;
}
#menu>li{
width:100px;
height:80px;
border:1px dashed blueviolet;
box-sizing: border-box;
}
.right{
position: relative;
width:399px;
background: pink;
margin-left:1px;
text-align: center;
font-size: 100px;
line-height: 400px;
}
.right li{
position: absolute;
width:399px;
height:400px;
display: none;
}
</style>
</head>
<body>
<div class="selectka">
<div class="left">
<ul id="menu">
<li class="menulist">衣服</li>
<li class="menulist">美妆</li>
<li class="menulist">包包</li>
<li class="menulist">美食</li>
<li class="menulist">首饰</li>
</ul>
</div>
<div class="right">
<ul>
<li class="numlist">衣服</li>
<li class="numlist">美妆</li>
<li class="numlist">包包</li>
<li class="numlist">美食</li>
<li class="numlist">首饰</li>
</ul>
</div>
</div>
<script>
var menu_list=document.getElementsByClassName("menulist");
var num_list=document.getElementsByClassName("numlist");
var moo=null;
var yuu=null;
for(var i=0;i<menu_list.length;i++) {
menu_list[i].index = i;
menu_list[i].onmouseenter = function () {
//this.index 为当前目标的索引值
if(yuu)yuu.style.background ="none";
this.style.background ="yellow";
yuu=this;
if(moo)moo.style.display="none";
num_list[this.index].style.display = "block";
moo = num_list[this.index];
}
}
</script>
</body>
</html>效果图：
--结束END--
本文标题: 用JS编写选项卡效果
本文链接: https://lsjlt.com/news/136007.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0