请教一下大神！
Scny
2016-01-03 12:42
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}
ul{list-style-type: none;}
a{text-decoration: none;}
#tab-list{width: 275px;height:190px;margin: 20px auto;}
#ul1{border-bottom: 2px solid #8B4513;height: 32px;}
#ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
#ul1 li:hover{cursor: pointer;}
#ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}
#tab-list div{border: 1px solid #7396B8;border-top: none;}
#tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}
.show{display: block;}.hide{display: none;}
</style>
<script type="text/javascript">
window.onload = function() {
var oUl1 = document.getElementById("ul1");
var aLi = oUl1.getElementsByTagName("li");
var oDiv = document.getElementById("tab-list");
var aDiv = oDiv.getElementsByTagName("div");
for(var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function() {
for(var i = 0; i < aLi.length; i++) {
aLi[i].className = "";
}
this.className = "active";
for(var j = 0; j < aDiv.length; j++) {
aDiv[j].className = "hide";
}
aDiv[this.index].className = "show";
}
}
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab-list">
<ul id="ul1">
<li>房产</li><li>家居</li><li>二手房</li>
</ul>
<div>
<ul>
<li><a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>
<li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>
<li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>
<li><a href="javascript:;">经典清新简欧爱家 90平老房焕发新生</a></li>
<li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>
<li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>
<li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>
<li><a href="javascript:;">黄城根小学学区仅260万 121平70万抛!</a></li>
<li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>
</ul>
</div>
</div>
</body>
</html>我就想问下
aLi[i].className = "" this.className = "active" aDiv[this.index].className = "show"
这三个代码 将className的值分别设为空，active，show。这样做的意义何在？
请大神教一下，感谢！
2回答
-
- 堂堂堂堂糖糖糖童鞋
- 2016-01-03 14:09:36
首先，你注意到上面的CSS样式中的“show”,"active","hide"了吗？上面的三行代码都是在，为元素动态添加CSS样式，或把元素的CSS样式清空，本来是静态的CSS代码，当和JavaScript结合起来，就可以动态的为元素添加我们想要的CSS样式了。
其次，就是一下，那三行代码的作用，以及在文档中的效果：
第一、二行代码，作用清空所有id为ul1的样式，也就是其class属性，使用开发者工具可以看到具体的效果，当你进行切换标签时：
原来的：
<ul id="ul1"><li>房产</li><li>家居</li><li>二手房</li> </ul>
切换时的：
第三行代码，作用是，显示div或隐藏div，用到的css样式：
.show{display: block;}.hide{display: none;}具体的效果是：
看到div中的class属性的值了吗？那都是通过JavaScript动态添加的！
-
- Scny
- 2016-01-04 18:55:11
回复 小小小小小小童鞋：嗯嗯 ，你说的我大概懂了。不过我发现个东西，就是我把aLi[i].index = i;这个去掉以后，然后运行这个代码，你会发现aLi[i].onmouseover = function() {
for(var i = 0; i < aLi.length; i++) {
aLi[i].className = "";
}
this.className = "active";
for(var j = 0; j < aDiv.length; j++) {
aDiv[j].className = "hide";
}
这一大段代码都会执行，而唯独aDiv[this.index].className = "show"这段代码没有执行
JavaScript进阶篇
468788 学习 · 22582 问题
相似问题