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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
绑定回车enter事件代码
May 18 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 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
二招解决php乱码问题
2012/03/25 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
php创建无限级树型菜单
2015/11/05 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
PHP PDO操作总结
2014/11/17 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Python面向对象特殊成员
2017/04/24 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
ORACLE第二个十问
2013/12/14 面试题
毕业生找工作推荐信
2013/11/21 职场文书
高考备战决心书
2014/03/11 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
担保书范本
2015/01/20 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android