恳求大家帮我看看为什么这个无法生效(*人*)

源自：10-1 编程挑战

恳求大家帮我看看为什么这个无法生效(人)

主要问题在于js代码无法生效。添加了onclick也没有表现出按钮的样子。

<!DOCTYPE html>

<html>

<head>

*{padding:0px;margin:10px 0px;}

span {margin-top:10px;padding:5px 20px;border:1px solid;border-bottom:2px;background-color:gray;line-height:18px;} /* 三个标题栏的默认样式 */

#neirong {width:350px;height:125px;border:1px solid;border-top:2px solid red;margin-top:4px;}

.xuan {margin-top:10px;padding:5px 20px;border:1px solid;border-top:2px solid red;border-bottom:2px;background-color:#fff;} /* 标题栏被选中后的样式 */

.show {list-style:none;padding-left:20px;} /* 文本内容被选中的样式 */

.hide {display:none;}

</style>

window.onload = function(){

// JS实现选项卡切换，内容文本全默认隐藏，通过点击选项卡显示对应文本。

var biaoti=document.getElementsByTagName("span");

var wenben=document.getElementsByTagName("ul")

for(var i=0;i<biaoti.length;i++){

biaoti[i].index = i;

biaoti[i].onClick = function(){

for(var n=0;n<biaoti.length;n++){

biaoti[n].className = "";

wenben[n].className = "hide";

this.className = "xuan";

wenben[this.index].className = "show";

}

</script>

</head>

<body>

<ul> //删掉了一些li避免占用篇幅

<li>275万购昌平邻铁三居总价20万买一居</li>

</ul>

<ul>

<li>40平出租屋大改造美少女的混搭小窝</li>

</ul>

<ul>

<li>通州豪华3居260万二环稀缺2居250w甩</li>

</ul>

</div>

</body>

</html>

提问者：番碱丶 2016-12-05 13:12