//需要引用jQuery包
$("#t1 a").click(function(){ //获取id为t1的div下面的所有a标签
var id = $(this).attr("id").substr(5)//截取当前点击的对象的id属性的第6位及之后的字符
$("#t1 a").attr("class","")//使所有的a标签的class样式都为空
$(this).attr("class","sel")//使被点击的a标签更换class样式为sel
$(".we").hide()//所有的class名为we的都隐藏
$("#w"+id).show()//让其中的一个class名为we并且id为w+id的div显示
})
<!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>
