本文实例为大家分享了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 () {
/* 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>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- js实现简单选项卡功能
- js实现简单的可切换选项卡效果
- js选项卡的实现方法
- javascript实现tabs选项卡切换效果(自写原生js)
- JS实现选项卡实例详解
- js实现Tab选项卡切换效果
- 用js实现简单的tab选项卡
- JS实现选项卡插件的两种写法（jQuery和class）
- js利用iframe实现选项卡效果
- js实现简单选项卡制作
本文由 华域联盟 原创撰写：华域联盟 » 用JS编写选项卡效果
转载请保留出处和原文链接：https://www.cnhackhy.com/81816.htm
