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.validate使用攻略 第五步 正则验证
Jul 01 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
JavaScript的==运算详解
Jul 20 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 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高级OOP技术演示
2009/08/27 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
PHP常用的小程序代码段
2015/11/14 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
Python表达式的优先级详解
2020/02/18 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
CSS3 实现的加载动画
2020/12/07 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
金融管理应届生求职信
2014/02/20 职场文书
党员岗位承诺书
2014/03/25 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
同居协议书范本
2014/04/23 职场文书
大学生英文求职信范文
2015/03/19 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
人民币符号
2022/02/17 杂记