//需要引用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显示
})
//看了你后来的补充！感觉你应该还是不想页面的id号固定，那思路应该改下//我的思路是这样的的在每个Content3之前再增加一个div。通过这个div然后获得其子元素，然后操作子元素就可以了 ，代码你看下就明白了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<style type="text/css">
.nTab{
float: left
width: 465px
margin: 0 auto
border-bottom:1px #009944 solid
background:#d5d5d5
background-position:left
background-repeat:repeat-y
margin-bottom:2px
}
.nTab .TabTitle{
clear: both
height: 30px
overflow: hidden
}
.nTab .TabTitle ul{
border:0
margin:0
padding:0
}
.nTab .TabTitle li{
float: left
width: 114px
height:30px
cursor: pointer
padding-top: 5px
padding-right: 0px
padding-left: 0px
padding-bottom: 2px
list-style-type: none
font-size: 14px
text-align: center
margin: 0
}
.nTab .TabTitle .active{background:#ff0000 border-left:1px #009944 solidborder-top:1px #009944 solidborder-right:1px #009944 solidwidth:111px}
.nTab .TabTitle .normal{background:#00ff00 border:1px #009944 solid}
.nTab .TabContent{
width:autobackground:#fff
margin: 0px auto
padding:10px 0 0 0
border-right:1px #009944 solidborder-left:1px #009944 solid
}
.none {display:none}
</style>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return
var tabObj = thisObj.parentNode.id
var tabList = document.getElementById(tabObj).getElementsByTagName("li")
for(i=0i <tabList.lengthi++)
{
var contents=document.getElementById("_Content"+i).childNodes
if (i == Num)
{
thisObj.className = "active"
for(var j=0j<contents.lengthj++){
contents[j].style.display = "block"
}
}else{
tabList[i].className = "normal"
for(var j=0j<contents.lengthj++){
contents[j].style.display = "none"
}
}
}
}
</script>
</head>
<body>
<br />
<br />
<div align="center" style="padding-left:250px">
<div class="nTab">
<!-- 标题开始 -->
<div class="TabTitle">
<ul id="myTab1">
<li class="active" onclick="nTabs(this,0)">aaa</li>
<li class="normal" onclick="nTabs(this,1)">bbb</li>
<li class="normal" onclick="nTabs(this,2)">ccc</li>
<li class="normal" onclick="nTabs(this,3)">ddd</li>
</ul>
</div>
<!-- 内容开始 -->
<div class="TabContent">
<div id="_Content0">
<div >000 </div>
<div >000 </div>
<div >000 </div>
</div>
<div id="_Content1">
<div class="none">111 </div>
<div class="none">111 </div>
<div class="none">111 </div>
</div>
<div id="_Content2">
<div class="none">222 </div>
<div class="none">222 </div>
<div class="none">222 </div>
</div>
<div id="_Content3">
<div class="none">333 </div>
<div class="none">333 </div>
<div class="none">333 </div>
</div>
</div>
</div>
<!-- 选项卡1结束 -->
</div>
</body>
</html>
