js进阶10-1编程挑战，切换失败，死活没找出来哪里的bug
慕粉18221508921
2016-10-29 20:03
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0px;padding:0px;font:12px normal "microsoft yahei";}
.tabs{margin-left:25px;margin-top:25px;}
.tabs ul{list-style:none;display:block;height:30px;line-height:30px;width:290px;border-bottom:2px brown solid;}/*如果没有设置ul的高度，那么div就会挤上去，跟在li后面*/
.tabs ul li{float:left;display:inline-block;list-style:none;cursor:pointer;margin:0px 3px;width:60px;height:28px;line-height:28px;text-align:center;border:1px solid #aaaaaa;border-bottom:none;}/*内联块状元素可设置宽高，但是没有独占一行*/
.tabs div{width:283px;height:125px;line-height:25px;padding-left:5px;padding-top:5px;border:1px solid #336699;border-top:none;}
.tabs ul li.on{border-top:2px solid brown;border-bottom:2px solid white;}
.hide{display:none;}
</style>
<script type="text/javascript">
window.onload=function(){
var tabs=document.getElementsByClassName("tabs");
var uls=tabs.document.getElementsByTagName("ul")[0];
var lists=uls.document.getElementsByTagName("li");
var divs=tabs.document.getElementsByTagName("div");
for(var i=0,len=lists.length;i<len;i++){
lists[i].index=i;//先通过index给菜单栏的三项编号，比如你点击菜单栏第二项 那么就要通过this.index来得到此时点击的是第2个菜单项 ；直接删掉不用index为什么不行？
lists[i].onclick=function(){
for(var n=0;n<len;n++){
lists[n].className="";
divs[n].className="hide";
}
this.className="on";//lists.className="on";为什么不行？
divs[this.index].className="";//divs[i].className="";为什么不行？
};
}
}
</script>
</head>
<body>
<div class="tabs">
<ul>
<li class="on">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
275万购昌平邻铁三居 总价20万买一居<br />
200万内购五环三居 140万安家东三环<br />
北京首现零首付楼盘 53万购东5环50平<br />
京楼盘直降5000 中信府公园楼王现房<br />
</div>
<div class="hide">
40平出租屋大改造 美少女的混搭小窝<br />
经典清新简欧爱家 90平老房焕发新生<br />
新中式的酷色温情 66平撞色活泼家居<br />
瓷砖就像选好老婆 卫生间烟道的设计<br />
</div>
<div class="hide">
通州豪华3居260万 二环稀缺2居250w甩<br />
西3环通透2居290万 130万2居限量抢购<br />
黄城根小学学区仅260万 121平70万抛!<br />
独家别墅280万 苏州桥2居优惠价248万<br />
</div>
</div>
</body>
</html>
1回答
-
- stone310
- 2016-10-30 20:46:29
问题出在js最上面赋值，如注释：
var tabs=document.getElementsByClassName("tabs"); var uls=tabs.document.getElementsByTagName("ul")[0]; var lists=uls.document.getElementsByTagName("li"); var divs=tabs.document.getElementsByTagName("div"); //这里获取元素用自义定的父元素就不需要加document了， //像第2条该这么写：var uls=tabs.getElementsByTagName("ul")[0]; 同理第3，第4； //另外 第一条tabs赋值，虽然只有一个元素，但获取的是一个类数组形式，因此也要加下标，就像第二条一样，这么写： //var tabs=document.getElementsByClassName("tabs")[0];因此完整写法如下：
var tabs=document.getElementsByClassName("tabs")[0]; var uls=tabs.getElementsByTagName("ul")[0]; var lists=uls.getElementsByTagName("li"); var divs=tabs.getElementsByTagName("div");
JavaScript进阶篇
468783 学习 · 22528 问题
相似问题