选则框的问题

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* { padding:0; margin:0 }body { padding:100px; }ul { width:450px; height:30px; line-height:30px; background:#999; }.hao { position:relative; }.hao li { float:left; width:150px; height:30px; line-height:30px; list-style:none; text-align:center; }#wo li a { display:block; width:150px; height:30px; text-decoration:none; }li a:hover { width:150px; height:30px; display:block; background:#000; font-family:Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; }#ni { width:450px; height:200px; position:absolute; top:30px; left:0; border:1px solid #CCC; }#ni p { background:#CCC; display:none; }#ni p:hover { }
</style>
</head><body>
<div class="hao">
      <ul>
            <div id="wo">
                  <li ><a href="#">first</a></li>
                  <li ><a href="#">second</a></li>
                  <li ><a href="#">thrid</a></li>
            </div>
      </ul>
      <div id="ni">
            <p > 使用苹果手机的朋友们注意啦：苹果5自带的地图中把中国的#钓鱼岛#划给了日本，而诺基亚的地图 标记始终是中国的，你们还是好好想想吧，别成了卖国贼啊，我宁可不用手机绝对也不使用美国的苹果5手机，世界华人团结起来拒绝苹果5，直到它在地图上把钓鱼岛还给中国为止！必须转。 </p>
            <p >你是天空中的一片云,偶尔投影在我的波心,你不必讶异,更不必喜欢,在转瞬间消失的踪影.</p>
            <p > 这 一方面的原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见（见W3C的解释）。现在只要将给外围元素添 加一个"overflow:auto"，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决ID的问题了，再加上"_height:1%"，这 个问题就完全解决了。
                  关于闭合浮动元素（clearing float）的方法现在已经很多了，个人认为简单实用的方法就是使用:after伪类动态的嵌入一个用于清除浮动的元素，可惜代码量太大了，看上去不够简 </p>
      </div>
</div>
<script type="text/javascript">var obj=document.getElementById("wo").getElementsByTagName("a");for( i=0;i<obj.length;i++)
{
obj[i].onmouseover=function(){

var dis=document.getElementById("ni").getElementsByTagName("p");

dis[i]=function(){
this.style.display="block";
}
}
obj[i].onmouseout=function(){

var dis=document.getElementById("ni").getElementsByTagName("p");
     dis[i]=function(){
this.style.display="none";
 }
}}
</script>
</body>
</html>//选择框不能弹出,我希望高手对我的JAVASCRIPT指正.

解决方案 »

  1.   

    <script type="text/javascript">
    var obj=document.getElementById("wo").getElementsByTagName("a");
    for( i=0;i<obj.length;i++)
    {
        var dis=document.getElementById("ni").getElementsByTagName("p");
        (function(i){
            obj[i].onmouseover=function(){
                dis[i].style.display="block";
            }
            obj[i].onmouseout=function(){
                dis[i].style.display="none";
            }
        })(i)
    }
    </script>
      

  2.   

    按效果来说，应该是要选中的那个可以一直显示才对吧？
    <script type="text/javascript">
    var obj=document.getElementById("wo").getElementsByTagName("a");
    for( i=0;i<obj.length;i++)
    {
        var dis=document.getElementById("ni").getElementsByTagName("p");
        (function(i){
            obj[i].onmouseover=function(){
                for(j=0;j<obj.length;j++){
                    dis[j].style.display="none";
                }
                dis[i].style.display="block";
            }
        })(i)
    }
    </script>
      

  3.   

     你的CODE 没有作用 我只完成了 三个下拉框不在一个位置的功能,我现在想要他们定位在一个地方.