msn上的tab功能Firefox对childNodes处理的一个BUG


Posted in Javascript onJanuary 21, 2008

Firefox对childNodes处理的一个BUG     
childNodesFirefox在处理childNodes没有过滤换行与空格。所以在初次使用的时候,得到效果不是预期的效果。
HTML

<ul class="tbtn" ID="menuList"> 
<li class="curr" id="tabap3_btn_0" onclick="tabit(this)">理财大学B</li> 
<li id="tabap3_btn_1" onclick="tabit(this)">名医讲堂</li> 
<li id="tabap3_btn_2" onclick="tabit(this)">名医讲堂</li> 
<li id="tabap3_btn_3" onclick="tabit(this)">名医讲堂</li> 
<li class="lst" id="tabap3_btn_4" onclick="tabit(this)">影坛热点</li> 
</ul>

JS
function tabit(btn) 
  { 
    var idname = new String(btn.id); 
    var s = idname.indexOf("_"); 
    var e = idname.lastIndexOf("_")+1; 
    var tabName = idname.substr(0, s); 
    var id = parseInt(idname.substr(e, 1)); 
    var tabNumber = btn.parentNode.childNodes.length;    //IE和FF的值不同     
    for(i=0;i<tabNumber;i++) 
      { 
        if(document.getElementById(tabName+"_div_"+i)!=null)    //这里需要进行判断 
          { 
        document.getElementById(tabName+"_div_"+i).style.display = "none"; 
        document.getElementById(tabName+"_btn_"+i).style.backgroundImage = "url(pic/t-1-2.gif)"; 
        document.getElementById(tabName+"_btn_"+i).style.borderBottomColor = "#D7F2DA"; 
        document.getElementById(tabName+"_btn_"+i).style.cursor = "pointer"; 
        } 
    } 
    document.getElementById(tabName+"_div_"+id).style.display = "block"; 
    btn.style.backgroundColor = "#fff"; 
    btn.style.borderBottomColor = "#fff"; 
    btn.style.cursor = "default"; 
}

 在IE上menuList的childNodes.length的值为5,而在Firefox值为11.因此我们在使用childNodes对象时需要先对其判断或去掉空格。
Javascript 相关文章推荐
javascript concat数组累加 示例
Sep 03 Javascript
ExtJS 下拉多选框lovcombo
May 19 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
Vue精简版风格概述
Jan 30 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
JS中min函数实例讲解
Feb 18 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
element中的$confirm的使用
Apr 26 Javascript
利用js跨页面保存变量做菜单的方法
Jan 17 #Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 #Javascript
JavaScript表单常用验证集合
Jan 16 #Javascript
JavaScript的Cookies
Jan 16 #Javascript
JavaScript中的对象化编程
Jan 16 #Javascript
JavaScript中的事件处理
Jan 16 #Javascript
JavaScript中的其他对象
Jan 16 #Javascript
You might like
浅谈电磁辐射对健康的影响
2021/03/01 无线电
PHP网站提速三大“软”招
2006/10/09 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python 开发Activex组件方法
2009/11/08 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
深入理解python对json的操作总结
2017/01/05 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Python使用进程Process模块管理资源
2020/03/05 Python
Python如何给函数库增加日志功能
2020/08/04 Python
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
干部培训自我鉴定
2014/01/22 职场文书
校园之星获奖感言
2014/01/29 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
大一新生学期自我评价
2014/04/09 职场文书
教师考核表个人总结
2015/02/12 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
喋血孤城观后感
2015/06/08 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python