首页新闻找找看学习计划

新手求教一些js问题

0
[已解决问题] 解决于 2016-01-28 15:59
<ul class="menu">
  <li> <a href="#" >Link1</a>
    <div>Content1</div>
  </li>
  <li> <a href="#" >Link2</a>
    <div>Content2</div>
  </li>
  <li> <a href="#" >Link3</a>
    <div>Content3</div>
  </li>
</ul>

有如上html代码,我想给 每个<a>元素加上onmouseover属性实现控制<div>的显示或隐藏。js如下


window.onload = function () {
        var ul = document.getElementsByClassName("menu")[0];
        var lis = getElementChildrenNodes(ul);
        for (var i = 0; i < lis.length; i++) {
            var children = getElementChildrenNodes(lis[i]);
            var a = children[0];
            var div = children[1];
            a.setAttribute("onmouseover", Show(div));
            a.setAttribute("onmouseout", Hide(div));
        }
    };
    function getElementChildrenNodes(parent) {
        var elementNodes = [];
        for (var i = 0; i < parent.childNodes.length; i++) {
            if (parent.childNodes[i] != null && parent.childNodes[i].nodeType == 1) {
                elementNodes.push(parent.childNodes[i]);
            }
        }
        return elementNodes;
    }
    function Show(dom) {
        dom.style.display = "block";
    };


    function Hide(dom) {
        dom.style.display = "none";
    };

 

请问该如何解决?

龙葛格的主页 龙葛格 | 小虾三级 | 园豆:712
提问于:2016-01-23 22:27
< >
分享
最佳答案
0
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .menu li div{
            display: none;
        }
    </style>
</head>
<body>
<ul class="menu" id="menu">
    <li> <a href="#" >Link1</a>
        <div>Content1</div>
    </li>
    <li> <a href="#" >Link2</a>
        <div>Content2</div>
    </li>
    <li> <a href="#" >Link3</a>
        <div>Content3</div>
    </li>
</ul>
</body>
</html>
<script>
    window.onload=function(){
        var menu=document.getElementById('menu').children;
        for(var i=0;i<menu.length;i++){
            menu[i].children[0].onmouseover=function(){
                this.parentNode.children[1].style.display='block';
            };
            menu[i].children[0].onmouseout=function(){
                this.parentNode.children[1].style.display='none';
            }
        }
    }
</script>

以上为存js代码 测试有效

使用Jquery会更简单

使用Jquery会更简单

奖励园豆:5
默然沉醉 | 菜鸟二级 |园豆:352 | 2016-01-25 16:16
其他回答(4)
0

lis.lenth

length

RNN | 园豆:209 (菜鸟二级) | 2016-01-23 22:34

谢谢,修改后还是不行,可以帮看看吗?

运行以后是这样的。。。

<a onmouseover="undefined" onmouseout="undefined" href="#">
支持(0) 反对(0) 龙葛格 | 园豆:712 (小虾三级) | 2016-01-23 23:12

@龙葛格: a标签有一个title属性,可以达到你的效果。

支持(0) 反对(0) RNN | 园豆:209 (菜鸟二级) | 2016-01-24 08:43

@木头小白: 但是tittle属性内不能有元素,我是希望在下面的div中放置元素的

支持(0) 反对(0) 龙葛格 | 园豆:712 (小虾三级) | 2016-01-25 09:31
0

//此处报错:lis.lenth undefined  //lis.length

刘宏玺 | 园豆:14004 (专家六级) | 2016-01-23 22:53

谢谢啦,运行以后是这样的结果。为啥呢?咋解决?

<a onmouseover="undefined" onmouseout="undefined" href="#">
支持(0) 反对(0) 龙葛格 | 园豆:712 (小虾三级) | 2016-01-23 23:13
0

a.setAttribute("onmouseover",  "   Show(div)  ");  

双引号括起来

逐影 | 园豆:996 (小虾三级) | 2016-01-24 00:03

试过啦,还是不行。。。

<a onmouseover="Show(div)" onmouseout="Hide(div)" href="#">

code是这样的,但是效果出不来

支持(0) 反对(0) 龙葛格 | 园豆:712 (小虾三级) | 2016-01-25 09:30

@龙葛格: 和你的代码顺序有关,如果这一段html代码先生成,而相关函数未加载的话,就执行不了。试试先把相关函数引用进来,再生成这段html代码。

支持(0) 反对(0) 逐影 | 园豆:996 (小虾三级) | 2016-01-25 16:33
0

用jQuery写

hslgmq | 园豆:45 (初学一级) | 2016-01-25 10:46
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册