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 相关文章推荐
jQuery表格行换色的三种实现方法
Jun 27 Javascript
js的一些常用方法小结
Jun 29 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
vue实现循环切换动画
Oct 17 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
幼儿园教师考核制度
2014/02/01 职场文书
班级学习计划书
2014/04/27 职场文书
国际贸易专业求职信
2014/06/04 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
银行招聘自荐信
2015/03/06 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python