msn上的tab功能Firefox对childNodes处理的一个BUG

2016-02-19 08:58 8 1 收藏

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的msn上的tab功能Firefox对childNodes处理的一个BUG,希望大家看完后能赶快学习起来。

【 tulaoshi.com - Web开发 】

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;itabNumber;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对象时需要先对其判断或去掉空格。

来源:http://www.tulaoshi.com/n/20160219/1589047.html

延伸阅读
标签: Web开发
字体真是个麻烦的东西,然后又是个重要的东西。为以更方的解决字体问题,就像上次推荐的《》,为了Pixel Perfect,我们不断纠结。像支付宝在CSS Reset中是这样写的: body{ :12px Tahoma,Helvetica,Arial,,sans-serif}  而淘宝这样写: body, button, input, select, textarea { :12px/1.5 ta...
标签: MySQL mysql数据库
  当出现一个磁盘溢出的情况时,MySQL做下列事情: 它每分钟检查一次看是否有足够空间写入当前行。如果有足够的空间,它继续好像发生什么事情。 每6分钟它将有关磁盘溢出的警告写入日志文件。 为了缓和这个问题,你可以采取下列行动: 继续,你只需释放足够的空闲磁盘空间以便插入所有记录。 放弃线程,你必须发一个mysqladmin kil...
标签: Java JAVA基础
'######################################################## '大风(XuanKong) '下面所显示的代码生成的jar文件你可以在www.xuankong.com获得! '####################################################### Sun公司java语言的的推出可以说是一个划时代的语言革命,这种语言同时能适应应用软件领域和网络开发领域,其优秀的网络开发功能更是...
第一,谈谈final, finally, finalize的区别。 final?修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承。因此一个类不能既被声明为 abstract的,又被声明为final的。将变量或方法声明为final,可以保证它们在使用中不被改变。被声明为final的变量必须在声明时给定初值,而在以后的引用中...
摘要 Visual C++ 是Microsoft编程工具中的老大,它功能强大,使用它几乎可以开发Windows平台上的任何程序。但同时由于其功能强大,涉及面广而让人很难进入VC++的门槛。由于是Microsoft开发工具的拳头产品,发布前都要经过严格的测试,同时不断地升级维护,因此,其中常用的功能很难发现Bug,一旦存在Bug则很难解决。 关键词 Visual C++; ...

经验教程

465

收藏

16
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部