用JS编写选项卡效果
更新时间：2021年09月17日 10:04:58 作者：fanfan_h
这篇文章主要为大家详细介绍了用JS编写选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
bootstrap-fileinput是基于bootstrap的上传控件。此控件在网上可以找到很多例子，接下来通过本文给大家分享bootstrap fileinput的使用教程，非常不错，感兴趣的朋友一起看看吧2016-12-12
这篇文章主要介绍了JavaScript中严格判断NaN的方法，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下2018-02-02
下面小编就为大家带来一篇js精确的加减乘除实例，具有非常好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧2017-11-11
如何判断一个对象或一个值是否是一个数组,在面试或工作中我们常常会遇到这个问题,既然出现频率高,想着还是做个整理,所以这篇文章主要给大家汇总介绍了关于JavaScript判断是否为数组的各种方法,需要的朋友可以参考下2021-08-08
Flexigrid在IE下不显示数据的情况，想必大家都有遇到过吧，下面有个不错的解决方法，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了详解JS异步加载的三种方式,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
本文主要介绍了DOM事件的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家详细介绍了JavaScript实现旋转木马轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了详解微信小程序的 request 封装示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了深入浅析Extjs中store分组功能的使用方法的相关资料,需要的朋友可以参考下2016-04-04
最新评论