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 隔行换色函数代码
Oct 24 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
AngularJS Module方法详解
Dec 08 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
基于jquery的表格排序
2010/09/11 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
医科学校毕业生自荐信
2013/11/09 职场文书
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
经典广告词大全
2014/03/14 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
党支部评议意见
2015/06/02 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python