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的option的value值的代码
Dec 16 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
JavaScript实现简单计时器
Jun 22 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
python实现图片批量压缩程序
2018/07/23 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
python解包概念及实例
2021/02/17 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
医院辞职信范文
2014/01/17 职场文书
农行心得体会
2014/09/02 职场文书
地球一小时活动总结
2015/02/27 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
家长反馈意见及建议
2015/06/03 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
Redis三种集群模式详解
2021/10/05 Redis