本文实例为大家分享了JS实现简单tab选项卡切换的具体代码,供大家参考,具体内容如下
本人在上一篇文章也写了用JS来实现tab选项卡切换效果,但是上次的那个代码比较复杂,这次是简化版的。
Tab效果ul{
list-style: none;
}
*{
margin: 0;
padding: 0;
}
#tab{
border: 1px solid #ccc;
margin: 20px auto;
width: 403px;
border-top: none;
}
.list ul{
overflow: hidden;
}
.list li{
float: left;
}
.list li{
padding-left: 28px;
padding-right: 28px;
padding-top: 6px;
padding-bottom: 6px;
border: 1px solid #ccc;
background: -moz-linear-gradient(top, #FEFEFE, #EDEDED);
background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
border-right: none;
cursor: pointer;
}
#listCon{
height: 100px;
}
#listCon div{
padding:10px;
position:absolute;
opacity:0;
filter:alpha(opacity=0);
}
.list li:first-child{
border-left: none;
}
.list li:hover{
background: #fff;
border-bottom: none;
}
.list li.cur{
background: #fff;
border-bottom: none;
}
#listCon div.cur{
opacity:1;
filter:alpha(opacity=100);
}
- 许嵩
- 周杰伦
- 林俊杰
- 陈奕迅
window.onload = function(){
var oDiv = document.getElementById("tab");
var lis = oDiv.getElementsByTagName("li");
var oDivCon = document.getElementById("listCon");
var lisDiv = oDivCon.getElementsByTagName("div");
for(var i=0;i
lis[i].index = i;
lis[i].onmouseover = function(){
show(this.index);
}
}
function show(a){
for(var j=0;j
lis[j].className = "";
lisDiv[j].className = "";
}
lis[a].className = "cur";
lisDiv[a].className = "cur";
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。