当前位置:编程学习 > JS >>

有谁能告诉我,加了java脚本,ie6还是显示不了下拉菜单

这是java脚本代码:<script type="text/javascript" language="javascript">
navhover=function(){
 var lis=document.getElementByld("navlist").getElementByTagName("LI");
 for(var i=0;i<lis.length;i++){
         lis[i].onmouseover=function(){
    this.className+="iehover";
    }  
  lis[i].onmouseout=function(){
   this.className=this.className.replace(new RegExp("iehover\\b"),"");
   }
  } 
}
if(window.attachEvent)window.attachEvent("onload",navhover);
</script>

这是css代码和html的标记代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>制作下拉式导航条</title>
<style type="text/css">
<!--
ul {
 margin: 0px;
 padding: 0px;
 list-style:none;
 
}
ul  li {
 float: left;
 width: 160px;
}
li  ul {
 display: none;
 top:20px;
}
li:hover ul,li.over ul {
 display: block;
}
ul li a {
 font-size: 12px;
 color: #777;
 text-decoration: none;
 display: block;
 padding: 3px;
 border: 1px solid #ccc;
}
ul li a:hover {
 background-color: #f4f4f4;
}
-->
</style>


</head>

<body>
使用ul列表标签以及css实现样式来制作下拉式导航条
<ul id="navlist">
   <li><a href="">文章</a>
       <ul>
       <li> <a href="">css教程</a></li>
    <li> <a href="">dom教程</a></li>
    <li> <a href="">xml教程</a></li>
    </ul>
   </li>
   <li><a href="">参考</a>
       <ul>
       <li> <a href="">xhtml</a></li>
    <li> <a href="">xml</a></li>
    <li> <a href="">css</a></li>
    </ul>
   </li>
   <li><a href="">blog</a>
       <ul>
       <li> <a href="">全部</a></li>
    <li> <a href="">网页技术</a></li>
    <li> <a href="">ui技术</a></li>
     <li> <a href="">flash技术</a></li>
    </ul>
   </li>
 
</ul>

 

 

</body>
</html>

请问下拉菜单为何显示不了
答案:我好久没用纯js写东西了,习惯jq了,你自己看看吧
首先,CSS改下,加一个.iehover
li:hover ul,li.over ul , .iehover{
 display: block;
}


<script type="text/javascript" src=" http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript" language="javascript">
navhover=function(){
 var lis=$("#navlist").children();
 for(var i=0;i<lis.length;i++){
         lis[i].onmouseover=function(){
        $(this).children().attr("class","iehover");
    } 
  lis[i].onmouseout=function(){
           $(this).children().attr("class","")
   }
  }
}
if(window.attachEvent)window.attachEvent("onload",navhover);
</script>

上一个:以后是javascript很有发展前途吗?
下一个:<急>脚本怎么调试?

CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,