好资源导航 » 文章资讯 » JS实现简单tab选项卡切换

JS实现简单tab选项卡切换

2023-08-10 10:38:04 71

本文实例为大家分享了JS实现简单tab选项卡切换的具体代码，供大家参考，具体内容如下

本人在上一篇文章也写了用JS来实现tab选项卡切换效果，但是上次的那个代码比较复杂，这次是简化版的。





Tab效果

ul{
list-style:none;
}
*{
margin:0;
padding:0;
}
#tab{
border:1pxsolid#ccc;
margin:20pxauto;
width:403px;
border-top:none;
}
.listul{
overflow:hidden;
}
.listli{
float:left;
}
.listli{
padding-left:28px;
padding-right:28px;
padding-top:6px;
padding-bottom:6px;
border:1pxsolid#ccc;
background:-moz-linear-gradient(top,#FEFEFE,#EDEDED);
background:-webkit-gradient(linear,lefttop,leftbottom,from(#fefefe),to(#ededed));
border-right:none;
cursor:pointer;
}
#listCon{
height:100px;
}
#listCondiv{
padding:10px;
position:absolute;
opacity:0;
filter:alpha(opacity=0);
}
.listli:first-child{
border-left:none;
}
.listli:hover{
background:#fff;
border-bottom:none;
}
.listli.cur{
background:#fff;
border-bottom:none;
}
#listCondiv.cur{
opacity:1;
filter:alpha(opacity=100);
}






许嵩
周杰伦
林俊杰
陈奕迅

断桥残雪、千百度、幻听、想象之中

红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话

被风吹过的夏天、江南、一千年以后

十年、K歌之王、浮夸

window.onload=function(){ varoDiv=document.getElementById("tab"); varlis=oDiv.getElementsByTagName("li"); varoDivCon=document.getElementById("listCon"); varlisDiv=oDivCon.getElementsByTagName("div"); for(vari=0;i

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

JS实现简单tab选项卡切换

热门推荐

随机推荐