<!DOCTYPE html>
<html>
<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.cur{
background: #fff
border-bottom: none
}
#listCon div.cur{
opacity:1
filter:alpha(opacity=100)
}
</style>
</head>
<body>
<div id="tab">
<div>
<ul>
<li>许嵩</li>
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ul>
</div>
<div id="listCon">
<div>断桥残雪、千百度、幻听、想象之中</div>
<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>
<div>被风吹过的夏天、江南、一千年以后</div>
<div>十年、K歌之王、浮夸</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=0i<lis.lengthi++){
lis[i].index = i
lis[i].onmouseover = function(){
show(this.index)
}
}
function show(a){
for(var j=0j<lis.lengthj++){
lis[j].className = ""
lisDiv[j].className = ""
}
lis[a].className = "cur"
lisDiv[a].className = "cur"
}
}
</script>
</body>
</html>
楼主 你的代码不全 我给你重新写一个吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tab页切换</title>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<script type="text/javascript">
function switchTab(ProTag, ProBox) {
for (i = 1 i < 5 i++) {
if ("tab" + i == ProTag) {
document.getElementById(ProTag).getElementsByTagName("a")[0].className = "on"
} else {
document.getElementById("tab" + i).getElementsByTagName("a")[0].className = ""
}
if ("con" + i == ProBox) {
document.getElementById(ProBox).style.display = ""
} else {
document.getElementById("con" + i).style.display = "none"
}
}
}
</script>
<style type="text/css">
*
{
padding: 0
margin: 0
line-height: 25px
font-size: 12px
list-style:none
}
#tabContainer
{
margin: 30px
}
#tabContainer li
{
float: left
width: 80px
margin: 0 3px
background: #efefef
text-align: center
}
#tabContainer a
{
display: block
}
#tabContainer a.on
{
background: pink
}
</style>
</head>
<body>
<div id="tabContainer">
<ul>
<li id="tab1"><a href="#" class="on" onclick="switchTab('tab1','con1')this.blur()return false">
命运</a></li>
<li id="tab2"><a href="#" onclick="switchTab('tab2','con2')this.blur()return false">
运势</a></li>
<li id="tab3"><a href="#" onclick="switchTab('tab3','con3')this.blur()return false">
缘分</a></li>
<li id="tab4"><a href="#" onclick="switchTab('tab4','con4')this.blur()return false">
人生</a></li>
</ul>
<div style="clear: both">
</div>
<div id="con1">
命运是个神马玩意儿...
</div>
<div id="con2" style="display: none">
霉运也是一种运气...
</div>
<div id="con3" style="display: none">
缘份纯粹是蒙人的东西...
</div>
<div id="con4" style="display: none">
人生就是人"生"出来之后的过程...
</div>
</div>
</body>
</html>
