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图像处理—仿射变换深度理解
Jan 16 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
cookie的secure属性详解
Apr 08 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
使用js画图之画切线
2015/01/12 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
Vue.js用法详解
2017/11/13 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
python3转换code128条形码的方法
2019/04/17 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
房地产员工找工作的自我评价
2013/11/15 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis