我有以下
HTML页面(页面在这里是简化的,因为它是真实的一个示例)：
<html>
<head>
<script type="text/javascript" src="JavaScript/Painting.js"></script>
</head>
<body>
<div id="center-wrapper">
<div id="side-menu">
<ul>
<li><a onclick="Paint()">About</a></li>
<li><a onclick="Paint()">Contents</a></li>
<li><a onclick="Paint()">Visual</a></li>
<li><a onclick="Paint()">CSS</a></li>
<li><a onclick="Paint()">Javascript</a></li>
</ul>
</div>
</div>
</body>
</html>
而且我有了Paint.js文件(再次,有点简化)：
function Paint()
{
var e = window.event;
var sender;
if (e.target)
{
sender = e.target;
}
else
{
if (e.srcElement)
{
sender = e.srcElement;
}
}
for (element in sender.parentNode.parentNode.getElementsByTagName("a"))
{
element.style.color = 'blue';
element.style.backgroundColor = '#FFFFFF';
}
sender.style.color = '#FFFFFF';
sender.style.backgroundColor = '#000000';
}
基本思路是：
>查找导致事件的HTML元素.
>直到你到达< ul>元件.
>循环列出项目;找到< a>标签并更改其颜色和背景
>退出循环后,更改导致事件的HTML元素的颜色和背景.
现在,我似乎无法到达位于for循环中的部分.我认为我通过调用GetElementsByTagName()方法犯错误.你可以帮我吗谢谢.
解决方法
您应该只调用getElementsByTagName()一次,缓存结果.
然后像这样迭代集合(而不是用于/ in).
var a_elements = sender.parentNode.parentNode.getElementsByTagName("a");
for (var i = 0,len = a_elements.length; i < len; i++ ) {
a_elements[ i ].style.color = 'blue';
a_elements[ i ].style.backgroundColor = '#FFFFFF';
}
sender.style.color = '#FFFFFF';
sender.style.backgroundColor = '#000000';
要获取目标,您可以将其作为inline onclick中的参数传递：
<ul>
<li><a onclick="Paint(this)">About</a></li>
<li><a onclick="Paint(this)">Contents</a></li>
<li><a onclick="Paint(this)">Visual</a></li>
<li><a onclick="Paint(this)">CSS</a></li>
<li><a onclick="Paint(this)">Javascript</a></li>
</ul>
那么你的javascript可以看起来像这样：
function Paint( sender ) {
var a_elements = sender.parentNode.parentNode.getElementsByTagName("a");
for (var i = 0,len = a_elements.length; i < len; i++ ) {
a_elements[ i ].style.color = 'blue';
a_elements[ i ].style.backgroundColor = '#FFFFFF';
}
sender.style.color = '#FFFFFF';
sender.style.backgroundColor = '#000000';
}
