html tab 选项卡切换代码,JS实现简单tab选项卡切换

本文实例为大家分享了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);

}

• 许嵩
• 周杰伦
• 林俊杰
• 陈奕迅

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

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

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

十年、K歌之王、浮夸

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";

}

}

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