大家帮帮忙看下怎么在火狐上不正常的。我想应该是js哪里写的不对。但是在ie上能正常的。请高手帮帮,或者把你改写的代码贴上来。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="stylesheet" type="text/css" href="css.css" />
<title>仿QQ菜单</title>
</head>
<body>
<div class="tagdh">
<div class="tag04" id="dhyk">
<ul>
<li class="k1"><span class="active"><a href="http://www.laoshuge.com" alt="老鼠哥">首页</a></span></li>
<li class="k1"><span><a href="http://www.laoshuge.com" alt="PHP">PHP</a></span></li>
<li class="k1"><span><a href="http://www.laoshuge.com" alt="样式">样式</a></span></li>
<li class="k1"><span><a href="http://www.laoshuge.com" alt="模板">模板</span></li>
<li class="k2"><span><a href="http://www.laoshuge.com" alt="留言区">留言区</span></li>
</ul>
</div> <div id="dhykcont">
<div class="tageirong">
<span class="sjvip">&gt;老鼠哥</span>
<a href="#">欢迎来到老鼠哥做客!</a>
</div>
<div class="tageirong" style="display:none">
<a href="#">PHP新闻</a>|
<a href="#">PHP资源共享</a>|
<a href="#">PHP5中文手册</a>|
<a href="#">PHP开发工具</a>
</div>
<div class="tageirong" style="display:none">
<a href="#">HTML&CSS</a>|
<a href="#">常用选择和属性</a>|
<a href="#">CSS布局实例</a>|
<a href="#">CSS在线手册</a>
</div>
<div class="tageirong" style="display:none">
<a href="#">CMS模板</a>|
<a href="#">论坛模板</a>|
<a href="#">商业模板</a>|
<a href="#">全部模板</a>|
</div>
<div class="tageirong" style="display:none">
<a href="#">请您给老鼠哥提出相关意见,再些谢谢您的支持!</a>
</div>
</div>
</div>
<script type="text/javascript">
function cleanWhitespace(element) {
for (var i = 0;i<element.childNodes.length;i++) {
var node = element.childNodes[i]
if (node.nodeType ==3 && !/\S/.test(node.nodeValue))
node.parentNode.removeChild(node);
}
}function menuGlobal(_tab, _content, evt,_startNum,classNames){
this.tabs = [];
this.contents = [];
this.currentNum;
this.init(_tab,_content,evt,_startNum,classNames);
}
menuGlobal.prototype.init = function(_tab, _content, evt,_startNum,classNames){
var old
var obj = document.getElementById(_tab)
var cbj = document.getElementById(_content)
if (!obj) return false
if (!cbj) return false
cleanWhitespace(obj)
cleanWhitespace(cbj)
this.tabs = obj.getElementsByTagName("span");
if (!this.tabs) return false for(var i=0; i<this.tabs.length; i++){
this.tabs[i].flag = i;
} var contstemp = cbj.childNodes;
for(var i=0; i<contstemp.length; i++){
if(contstemp[i].nodeType == 1)  this.contents.push(contstemp[i]);
}
if (_startNum>=this.tabs.length) {_startNum=0}
if (!_startNum){_startNum=0}
if (!classNames) {classNames="active"}
if (!evt) {evt=2} this.tabs[_startNum].style.display=""
this.tabs[_startNum].className=classNames
this.contents[_startNum].style.display=""
this.currentNum = _startNum
this.addEvent(evt,classNames);
}menuGlobal.prototype.addEvent = function(evt,classNames){
for(var i=0; i<this.tabs.length; i++){
this.tabs[i].reflect = this;
if (evt==2) {
this.tabs[i].onmouseover = function(){
var last = this.reflect.currentNum;
this.reflect.contents[last].style.display="none"
this.reflect.contents[this.flag].style.display="" if (this.reflect.tabs[last].className!="active") {
this.reflect.tabs[last].className=old
}else {
this.reflect.tabs[last].className=""
} old = this.reflect.tabs[this.flag].className
if (!old) {
this.reflect.tabs[this.flag].className=classNames
} else {
this.reflect.tabs[this.flag].className=old+"_1"
}
this.reflect.currentNum = this.flag;
this.blur();
return false;
}
} else {
this.tabs[i].onclick = function(){
var last = this.reflect.currentNum;
this.reflect.contents[last].style.display="none"
this.reflect.contents[this.flag].style.display=""
if (this.reflect.tabs[last].className!="active") {
this.reflect.tabs[last].className=old
}else {
this.reflect.tabs[last].className=""
} old = this.reflect.tabs[this.flag].className
if (!old) {
this.reflect.tabs[this.flag].className=classNames
} else {
this.reflect.tabs[this.flag].className=old+"_1"
}
this.reflect.currentNum = this.flag;
this.blur();
return false;
}
} }
}
</script>
<script type="text/javascript">
     var qdhyk=new menuGlobal("dhyk","dhykcont",2,0);
     var qMenu1=new menuGlobal("yekaTab01","yekacont01",2,0);
     var qMenu2=new menuGlobal("yekaTab02","yekacont02",2,0);
     var qMenu3=new menuGlobal("yekaTab03","yekacont03",2,0);
</script></body>
</html>
这是css样式代码
@CHARSET "UTF-8";
body{
margin:0 auto;

}
.tagdh{
margin:0 auto;
width:448px;
}ul,li,span,div{
margin:0;
padding:0;
}.tag04{
background-attachment:scroll;
background-color:transparent;
background-image:url(images/tag_bg.jpg);
background-position:50% bottom;
background-repeat:no-repeat;
width:408px;
height:29px;
}
.tag04 li{
cursor:pointer;
display:inline;
float:left;
height:29px;
line-height:29px;
text-align:center;
font-family:Arial;
font-size:16px;
}
.tag04 span{
display:block;
height:29px;
}
.tag04 span a{
color:#333333;
}
.tag04 span a:visited{
color:#333333;
}
.tag04 span a:hover{
color:#333333;
text-decoration:none;
}
.tag04 .active{
color:#FFFFFF;
font-weight:bold;
width:100%;
}
.tag04 .active a{
color:#FFFFFF;
}.tag04 .active a:visited{
color:#FFFFFF;
}
.tag04 .active a:hover{
color:#FFFFFF;
}
.tag04 .k1{
background-attachment:scroll;
background-color:transparent;
background-image:url(images/tagtf.png);
background-position:-83px 0;
background-repeat:no-repeat;
margin-right:2px;
width:80px;
}
.tag04 .k2{
background-attachment:scroll;
background-color:transparent;
background-image:url(images/tagtf.png);
background-position:-83px -31px;
background-repeat:no-repeat;
margin-right:0px;
width:80px;
}.tag04 .k1 .active{
background-attachment:scroll;
background-color:transparent;
background-image:url(images/tagtf.png);
background-position:0 0;
background-repeat:no-repeat;
}
.tag04 .k2 .active{
background-attachment:scroll;
background-color:transparent;
background-image:url(images/tagtf.png);
background-position:0 -30px;
background-repeat:no-repeat;
}.tageirong{
background-attachment:scroll;
background-color:transparet;
background-image:url(images/tagnr_bg3.png);
background-position:0 0;
background-repeat:no-repeat;
color:#FFFFFF;
height:29px;
line-height:29px;
padding-left:10px;
width:398px;
}
.tageirong a{
color:#FFFFFF;
text-decoration:none;
}
.tageirong a:visited{
color:#FFFFFF;
}
.tageirong a:hover{
color:#FFFFFF;
}.tageirong .sjvip{
float:right;
padding-right:25px;
font-weight:bold;
font-size:14px;
}主菜单栏和子菜单栏对不上的,而且首页就没有的。

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <style type="text/css">
        @CHARSET "UTF-8"; body{ margin:0 auto;background-color:#000; } .tagdh{ margin:0 auto; width:448px; } ul,li,span,div{ margin:0; padding:0; }
         .tag04{ background-attachment:scroll; background-color:transparent; background-image:url(images/tag_bg.jpg); background-position:50% bottom; background-repeat:no-repeat; width:408px; height:29px; }
          .tag04 li{ cursor:pointer; display:inline; float:left; height:29px; line-height:29px; text-align:center; font-family:Arial; font-size:16px; } 
          .tag04 span{ display:block; height:29px; } .tag04 span a{ color:#333333; } .tag04 span a:visited{ color:#333333; }
           .tag04 span a:hover{ color:#333333; text-decoration:none; } .tag04 .active{ color:#FFFFFF; font-weight:bold; width:100%; }
            .tag04 .active a{ color:#FFFFFF; } .tag04 .active a:visited{ color:#FFFFFF; } .tag04 .active a:hover{ color:#FFFFFF; } 
            .tag04 .k1{ background-attachment:scroll; background-color:transparent; background-image:url(images/tagtf.png); background-position:-83px 0; background-repeat:no-repeat; margin-right:2px; width:80px; }
             .tag04 .k2{ background-attachment:scroll; background-color:transparent; background-image:url(images/tagtf.png); background-position:-83px -31px; background-repeat:no-repeat; margin-right:0px; width:80px; } 
             .tag04 .k1 .active{ background-attachment:scroll; background-color:transparent; background-image:url(images/tagtf.png); background-position:0 0; background-repeat:no-repeat; } 
             .tag04 .k2 .active{ background-attachment:scroll; background-color:transparent; background-image:url(images/tagtf.png); background-position:0 -30px; background-repeat:no-repeat; }
              .tageirong{ background-attachment:scroll; background-color:transparet; background-image:url(images/tagnr_bg3.png); background-position:0 0; background-repeat:no-repeat; color:#FFFFFF; height:29px; line-height:29px; padding-left:10px; width:398px; } 
              .tageirong a{ color:#FFFFFF; text-decoration:none; } .tageirong a:visited{ color:#FFFFFF; } .tageirong a:hover{ color:#FFFFFF; } .tageirong .sjvip{ float:right; padding-right:25px; font-weight:bold; font-size:14px; }
        </style>
        <title>仿QQ菜单</title>
    </head>
    <body>
        <div class="tagdh">
            <div class="tag04" id="dhyk">
                <ul>
                    <li class="k1"><span class="active"><a href="http://www.laoshuge.com" alt="老鼠哥">首页</a></span></li>
                    <li class="k1"><span><a href="http://www.laoshuge.com" alt="PHP">PHP</a></span></li>
                    <li class="k1"><span><a href="http://www.laoshuge.com" alt="样式">样式</a></span></li>
                    <li class="k1"><span><a href="http://www.laoshuge.com" alt="模板">模板</span></li>
                    <li class="k2"><span><a href="http://www.laoshuge.com" alt="留言区">留言区</span></li>
                </ul>
            </div>
            <div id="dhykcont">
                <div class="tageirong">
                    <span class="sjvip">&gt;老鼠哥</span> <a href="#">欢迎来到老鼠哥做客!</a>
                </div>
                <div class="tageirong" style="display: none">
                    <a href="#">PHP新闻</a>| <a href="#">PHP资源共享</a>| <a href="#">PHP5中文手册</a>| <a href="#">
                        PHP开发工具</a>
                </div>
                <div class="tageirong" style="display: none">
                    <a href="#">HTML&CSS</a>| <a href="#">常用选择和属性</a>| <a href="#">CSS布局实例</a>| <a href="#">
                        CSS在线手册</a>
                </div>
                <div class="tageirong" style="display: none">
                    <a href="#">CMS模板</a>| <a href="#">论坛模板</a>| <a href="#">商业模板</a>| <a href="#">全部模板</a>|
                </div>
                <div class="tageirong" style="display: none">
                    <a href="#">请您给老鼠哥提出相关意见,再些谢谢您的支持!</a>
                </div>
            </div>
        </div>    <script type="text/javascript"> 
    // function cleanWhitespace(element) {
    //    for (var i = 0; i < element.childNodes.length; i++) {
    //        var node = element.childNodes[i]
    //        if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
    //        node.parentNode.removeChild(node);
    //    }
    //}
    //function menuGlobal(_tab, _content, evt, _startNum, classNames) {
    //    this.tabs = [];
    //    this.contents = [];
    //    this.currentNum;
    //    this.init(_tab, _content, evt, _startNum, classNames);
    //}
    //menuGlobal.prototype.init = function (_tab, _content, evt, _startNum, classNames) {
    //    var old;
    //    var obj = document.getElementById(_tab) ;
    //    var cbj = document.getElementById(_content); 
    //    if (!obj) return false;
    //    if (!cbj) return false; cleanWhitespace(obj);
    //     cleanWhitespace(cbj);
    //     this.tabs = obj.getElementsByTagName("span");
    //    if (!this.tabs) return false;
    //    
    //    for (var i = 0; i < this.tabs.length; i++) {
    //        this.tabs[i].flag = i;
    //    }
    //    var contstemp = cbj.childNodes;
    //    for (var i = 0; i < contstemp.length; i++) {
    //        if (contstemp[i].nodeType == 1) this.contents.push(contstemp[i]);
    //    }
    //    if (_startNum >= this.tabs.length) {
    //        _startNum = 0;
    //    }
    //    if (!_startNum) {
    //        _startNum = 0;
    //    }
    //    if (!classNames) {
    //        classNames = "active";
    //    }
    //    if (!evt) {
    //        evt = 2;
    //    }
    //    this.tabs[_startNum].style.display = "";
    //    this.tabs[_startNum].className = classNames;
    //     this.contents[_startNum].style.display = "";
    //    this.currentNum = _startNum;
    //     this.addEvent(evt, classNames);
    //}
    //menuGlobal.prototype.addEvent = function (evt, classNames) {
    //    for (var i = 0; i < this.tabs.length; i++) {
    //        this.tabs[i].reflect = this;
    //        if (evt == 2) {
    //            this.tabs[i].onmouseover = function () {
    //                var last = this.reflect.currentNum;
    //                this.reflect.contents[last].style.display = "none"
    //                this.reflect.contents[this.flag].style.display = "block"
    //                if (this.reflect.tabs[last].className != "active") {
    //                    this.reflect.tabs[last].className = old;
    //                } else {
    //                    this.reflect.tabs[last].className = "";
    //                }
    //                old = this.reflect.tabs[this.flag].className;
    //                if (!old) {
    //                    this.reflect.tabs[this.flag].className = classNames;
    //                } else {
    //                    this.reflect.tabs[this.flag].className = old + "_1"
    //                }
    //                this.reflect.currentNum = this.flag;
    //                this.blur();
    //                return false;
    //            }
    //        } else {
    //            this.tabs[i].onclick = function () {
    //                var last = this.reflect.currentNum;
    //                this.reflect.contents[last].style.display = "none";
    //                this.reflect.contents[this.flag].style.display = "block";
    //                if (this.reflect.tabs[last].className != "active") {
    //                    this.reflect.tabs[last].className = old;
    //                } else {
    //                    this.reflect.tabs[last].className = "";
    //                }
    //                old = this.reflect.tabs[this.flag].className;
    //                if (!old) {
    //                    this.reflect.tabs[this.flag].className = classNames;
    //                } else {
    //                    this.reflect.tabs[this.flag].className = old + "_1";
    //                }
    //                this.reflect.currentNum = this.flag;
    //                this.blur();
    //                return false;
    //            }
    //        }
    //    }
    //}//var qdhyk = new menuGlobal("dhyk", "dhykcont", 2, 0);
    //var qMenu1 = new menuGlobal("yekaTab01", "yekacont01", 2, 0);
    //var qMenu2 = new menuGlobal("yekaTab02", "yekacont02", 2, 0);
    //var qMenu3 = new menuGlobal("yekaTab03", "yekacont03", 2, 0);var menuList;
    var contentList;
    (function(){
         menuList = document.getElementById("dhyk").getElementsByTagName("li");
         contentList = document.getElementById("dhykcont").getElementsByTagName("div");
        for(var i=0;i<menuList.length;i++)
        {
            (function(index){
                menuList[index].onmouseover=function()
                {
                   
                      for(var i=0;i<menuList.length;i++)
                      {
                          contentList[i].style.display= i==index ?"block":"none";  
                          menuList[i].getElementsByTagName("span")[0].className= i==index ?"active":"old"; ;
                      }
                };
            })(i);
        }
    })();
         </script></body>
    </html>
      

  2.   

     var contstemp = cbj.childNodes;
    ==》
     var contstemp = cbj.getElementsByTagName("div");