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 相关文章推荐
检测jQuery.js是否已加载的判断代码
May 20 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
使用DataTable插件实现异步加载数据
Nov 19 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 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
ThinkPHP的I方法使用详解
2014/06/18 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
JavaScript中的null和undefined解析
2012/04/14 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
JS分页效果示例
2013/10/11 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
python中字符串的操作方法大全
2018/06/03 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Python3.4解释器用法简单示例
2019/03/22 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
is_file和file_exists效率比较
2021/03/14 PHP
.NET是怎么支持多种语言的
2015/02/24 面试题
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
妈妈别哭观后感
2015/06/08 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫