示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab效果</title>
<style type="text/css">
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.act{
background:pink;
color:#fff;
border-bottom: none;
}
#listCon div.act{
opacity:1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<div id="tab">
<div class="list">
<ul>
<li class="act">苹果</li>
<li>香蕉</li>
<li>榴莲</li>
<li>黄桃</li>
</ul>
</div>
<div id="listCon">
<div class="act">apple</div>
<div>banana</div>
<div>durian</div>
<div>peach</div>
</div>
</div>
<script type="text/javascript">
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.length;i++){
lis[i].index = i;
lis[i].onmouseover = function(){
show(this.index);
}
}
function show(a){
for(var j=0;j<lis.length;j++){
lis[j].className = "";
lisDiv[j].className = "";
}
lis[a].className = "act";
lisDiv[a].className = "act";
}
}
</script>
</body>
</html>
浏览器上的效果：
358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
