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 相关文章推荐
json2.js的初步学习与了解
Oct 06 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
js实现碰撞检测
Jan 29 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
Jquery使用css方法改变样式实例
2015/05/18 Javascript
javascript学习之json入门
2016/12/22 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python判断字符串是否纯数字的方法
2014/11/19 Python
Python实现线程状态监测简单示例
2018/03/28 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Python创建临时文件和文件夹
2020/08/05 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
C#笔试题
2015/07/14 面试题
单位工程竣工验收方案
2014/03/16 职场文书
品质主管岗位职责
2014/03/16 职场文书
房产委托公证书
2014/04/08 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
化工专业求职信
2014/07/01 职场文书
运动会班级前导词
2015/07/20 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android