新手求教一些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";
};
请问该如何解决？
最佳答案
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
其他回答(4)
0
lis.lenth
length
谢谢，修改后还是不行，可以帮看看吗？
运行以后是这样的。。。
<a onmouseover="undefined" onmouseout="undefined" href="#">
@龙葛格: a标签有一个title属性，可以达到你的效果。
@木头小白: 但是tittle属性内不能有元素，我是希望在下面的div中放置元素的
0
//此处报错：lis.lenth undefined //lis.length
谢谢啦，运行以后是这样的结果。为啥呢？咋解决？
<a onmouseover="undefined" onmouseout="undefined" href="#">
0
a.setAttribute("onmouseover", " Show(div) ");
双引号括起来
试过啦，还是不行。。。
<a onmouseover="Show(div)" onmouseout="Hide(div)" href="#">
code是这样的，但是效果出不来
@龙葛格: 和你的代码顺序有关，如果这一段html代码先生成，而相关函数未加载的话，就执行不了。试试先把相关函数引用进来，再生成这段html代码。
0
用jQuery写
