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 相关文章推荐
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
js窗口震动小程序分享
Nov 28 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
javascript实现商品图片放大镜
Nov 28 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内核探索:变量存储与类型使用说明
2014/01/30 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
pytorch 预训练层的使用方法
2019/08/20 Python
详解Python多线程下的list
2020/07/03 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
服务承诺口号
2014/05/22 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
2014年减负工作总结
2014/12/10 职场文书
Nginx HTTP跳转至HTTPS
2022/05/15 Servers
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android