for循环绑定事件。忽略中间过程中的绑定事件，解决办法是将中间过程中的绑定写成函数，通过循环传参完成绑定。
<!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>
#seoblock *{ padding:0; margin:0 }
#seoblock{border:1px solid #c5e0f0;padding:2px 0 0 2px; width:178px;}
#seoblock h2{ background:url(img/bg1.png) 0 0 no-repeat;width:164px;height:26px; line-height:30px; font-size:14px;font-weight:700; color:#336699;padding-left:17px; overflow:hidden;margin-bottom:5px;}
#seoblock h2 span{ padding-right:10px;}
#seoblock h2 .more{ color:#333; font:12px/33px 宋体,arial,serif;}
#seoblock ul{clear:both;font-size:12px;}
#seoblock ul li{ list-style:none;}
#seoblock ul li a{display:inline-block;color:#606060;margin-right:25px; text-decoration:none;}
#seoblock ul.t{ margin:0 0 5px 0;height:21px; border-bottom:-1px;float:left;}
#seoblock ul.t li{float:left;}
#seoblock ul.t li a{background:url(img/bg1.png) 0 -26px no-repeat; height:21px;width:55px; line-height:21px; color:#606060;margin-right:4px; text-decoration:none;text-align:center;}
#seoblock ul.t li a.mr0{margin-right:0px;}
#seoblock ul.t li.show{display:block;}
#seoblock ul.t li.show a{position: relative; bottom: -1px;height:25px;background:#fff;border:1px solid #C5E0F0; border-bottom:none;width:53px; }
#seoblock ul.content{width:174px;}
#seoblock ul.content li{display:none;}
#seoblock ul.content li.show{display:block; border:1px solid #C5E0F0; overflow: hidden;margin-bottom:5px;}
#seoblock ul.content li p{line-height:24px; padding-left:5px;}
#seoblock ul.content li p a{white-space:nowrap; margin: 0 8px;}
</style>
</head>
<body>
<div id="seoblock">
<h2><span>家居就商城</span><span>品牌网店</span></h2>
<!--第一行开始-->
<ul class="t">
<li class="show"><a href="###">家1</a></li>
<li><a href="###">家2</a></li>
<li><a href="###">家3</a></li>
</ul>
<ul class="content">
<li class="show"><p><a href="#">家1</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家2</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家3</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
</ul>
<!--第一行结束-->
<!--第二行开始-->
<ul class="t">
<li><a href="###">家11</a></li>
<li><a href="###">家22</a></li>
<li><a href="###" class="mr0">家居</a></li>
</ul>
<ul class="content">
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
</ul>
<!--第二行结束-->
<!--第三行开始-->
<ul class="t">
<li><a href="###">家居</a></li>
<li><a href="###">家居</a></li>
<li><a href="###" class="mr0">家居</a></li>
</ul>
<ul class="content">
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
</ul>
<!--第三行结束-->
<!--第四行开始-->
<ul class="t">
<li><a href="###">家居</a></li>
<li><a href="###">家居</a></li>
<li><a href="###" class="mr0">家居</a></li>
</ul>
<ul class="content">
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
</ul>
<!--第四行结束-->
</div>
<script>
var seoObj = document.getElementsByTagName("ul");
var tLi = [],
contentLi = [],
indexOld = 0;
//获取所有className是t的ul
for(var i = 0; i< seoObj.length; i++){
if(seoObj[i].className == "t"){
fnPush(seoObj[i],tLi);
}
if(seoObj[i].className == "content"){
fnPush(seoObj[i],contentLi);
}
}
for (var i=0; i<tLi.length; i++){
var that = tLi[i];
addEvent( that );
}
function addEvent(that){
// alert(indexOfArray(that,tLi));
if (window.attachEvent){
that.attachEvent('onmouseover',function(){
changeClass.call(that);
});
} else {
that.addEventListener('mouseover',function(){
changeClass.call(that)
},false);
}
}
//获取标题dom和内容dom
function fnPush(seoObj,tORcontent){
var seoObjs = seoObj.childNodes,
len = seoObjs.length;
for (var j = 0; j < len; j++ )
{
if (seoObjs[j].nodeName == "LI")
{
tORcontent.push(seoObjs[j]);
}
}
}
function changeClass() {
//alert(this.tagName);
if (hasClass(this,"show") == null){
removeClass(tLi[indexOld],"show");
addClass(this,"show");
//alert(indexOfArray(that,tLi));
removeClass(contentLi[indexOld],"show");
addClass(contentLi[indexOfArray(this,tLi)],"show");
}
indexOld = indexOfArray(this,tLi);
}
//添加删除样式
function hasClass(element, className) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
if (element.className == undefined){
return null;
} else {
return element.className.match(reg);
}
}
function addClass(element, className) {
if (!this.hasClass(element, className))
{
element.className = className;
}
}
function removeClass(element, className) {
if (hasClass(element, className)) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
element.className = element.className.replace(reg,'');
}
}
function indexOfArray(elem,array){
for (var z = 0; z<array.length; z++ )
{
if(elem == array[z]){
return z;
}
}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
