本文提供使用JavaScript实现选项卡切换效果的完整代码示例。通过HTML结构布局与CSS样式控制，结合JS监听点击事件实现内容区域的动态显示与隐藏，帮助开发者快速掌握前端交互组件的实现原理。
JavaScript实现选项卡切换功能详解
本文分享了使用JavaScript实现选项卡切换效果的具体代码，供读者参考学习。
<!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 () {
/* console.log(this.index);*/ //this.index 为当前目标的索引值
/* for(var k=0;k<num_list.length;k++){
num_list[k].style.display ="none";
}
num_list[this.index].style.display ="block";
}*/
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>具体运行效果如下图所示：
以上内容为本文的全部分享，希望能为读者的学习提供有益帮助，同时也感谢大家的支持。