收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1712|回复: 2

找人解释一下这段js代码?很难理解?谢谢了。

[复制链接]
发表于 2010-9-30 12:55:50 | 显示全部楼层 |阅读模式
<style type="text/css">
* {margin:0;padding:0;}
#btn_father .btn1 {color:red;background-color:#ccc;}
#btn_father span {float:left;border:1px red solid;height:30px;line-height:30px;width:80px;text-align:center;font-weight:bold;cursorointer;}
#sp_father .show {display:block;}
#sp_father div {height:400px;width:400px;background-color:#eee;border:1px blue solid;display:none;}
.clear {clear:both;height:0;overflow:hidden;}</style>
<script language="javascript">
function tabchange() {
var bf = document.getElementById("btn_father");
var ss = bf.getElementsByTagName("span");
for(var i=0;i<ss.length;i++){
addEventHandler(ss[i],"mouseover",function(){ changecss(this);});
}
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else {
oTarget["on" + sEventType] = fnHandler;
}
}
function changecss(ospan) {
        var bf = document.getElementById("btn_father");
        var ss = bf.getElementsByTagName("span");
        var df = document.getElementById("sp_father");
        var ds = df.getElementsByTagName("div");
        for(var i=0;i<ss.length;i++){
                ss[i].className=" ";
                if (ospan == ss[i]){
                        ds[i].className="show";
                }else
                {
                        ds[i].className="";
                }
        }
        ospan.className="btn1";
}
        window.onload = function () {
        tabchange();
}
</script>
</head>
<body>

<div id="btn_father">
        <span class="btn1">按钮1</span>
        <span>按钮2</span>
        <span>按钮3</span>
        <span>按钮4</span>
        <div class="clear">&nbsp;</div>
</div>
<div id="sp_father">
        <div class="show">
        第一部分
        </div>
        <div>
        第二部分
        </div>
        <div >
        第3部分
        </div>
        <div>
        第4部分
        </div>
</div>
这段代码怎么理解啊
发表于 2010-9-30 13:15:09 | 显示全部楼层
tabchange() 为主函数 页面加载完就运行这个,在里面循环给span附加事件.
addEventHandler()函数 加事件 这里是mouseover 事件
changecss(ospan)函数  事件触发函数 遍历DIV, span与div是一一对应的,也就是鼠标移进第几个span,对应的第几个div显示出来
回复 支持 反对

使用道具 举报

发表于 2010-9-30 14:48:28 | 显示全部楼层
<script language="javascript">
//当鼠标移动至id是btn_father的DIV中的每个span上时,响应的显示sp_father下的元素

function tabchange() {
var bf = document.getElementById("btn_father");
var ss = bf.getElementsByTagName("span");
for(var i=0;i<ss.length;i++){//遍历所有btn_father下的元素,注册鼠标移入事件
addEventHandler(ss[i],"mouseover",function(){ changecss(this);});
}
}

//注册事件方法,参数:要注册的目标元素,事件类型,事件触发的内容(方法)
function addEventHandler(oTarget, sEventType, fnHandler) {
//兼容处理
if (oTarget.addEventListener) {//非IE
oTarget.addEventListener(sEventType, fnHandler, false);
} else {//IE系列
oTarget["on" + sEventType] = fnHandler;
}
}
//触发鼠标事件后的方法
function changecss(ospan) {
       var bf = document.getElementById("btn_father");
       var ss = bf.getElementsByTagName("span");
       var df = document.getElementById("sp_father");
       var ds = df.getElementsByTagName("div");
       for(var i=0;i<ss.length;i++){
              ss[i].className=" ";
              if (ospan == ss[i]){
                     ds[i].className="show";
              }else
              {
                     ds[i].className="";
              }
       }
       ospan.className="btn1";
}
       window.onload = function () {//1.程序入口
       tabchange();//执行
}
</script>
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2020-2-28 23:33 , Processed in 0.093513 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表