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用select实现日期控件
Jul 17 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
javascript实现计算器功能详解流程
Nov 01 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验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
PHP pear安装配置教程
2016/05/14 PHP
asm.js使用示例代码
2013/11/28 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
Python基于select实现的socket服务器
2016/04/13 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
django 单表操作实例详解
2019/07/30 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
2013年保送生自荐信格式
2013/11/20 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
单位车辆管理制度
2015/08/05 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
详解nginx进程锁的实现
2021/06/14 Servers
Python中rapidjson参数校验实现
2021/07/25 Python
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript