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 继承机制的实现(待续)
May 18 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
vue elementUI批量上传文件
Apr 26 Vue.js
利用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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
flash用php连接数据库的代码
2011/04/21 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
JavaScript中的字符串操作详解
2013/11/12 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
jQuery使用方法
2017/02/04 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
详解Python中的相对导入和绝对导入
2017/01/06 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
python retrying模块的使用方法详解
2019/09/25 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
计算机求职信
2013/12/01 职场文书
环境卫生倡议书
2014/08/29 职场文书
谢师宴家长致辞
2015/07/27 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android