新手求助_关于JS下拉菜单选项卡(鼠标经过事件)

Beagle4ce 2012-08-15 04:15:15

我是js的初学者,在练习的过程中遇到了一个没能解决的问题,就是当鼠标移动到菜单弹出选项卡里的时候没法实现改变其当前选项卡背景颜色的功能,代码如下:



<!doctype html>

<html>

<head>

<meta charset="utf-8">

<link id="link0" type="text/css" rel="stylesheet" href="ifelse.css" />

<script type="text/javascript" src="ifelse.js"></script>

<title>无标题文档</title>

</head>



<body id="body">

<div id="table">

	<div id="kuang1">

    	<p><a href="#" id="btn">下拉菜单</a></p>

        <ul id="ul1" >

        	<li><a href="#" class="a1">下拉选项1</a></li>

            <li><a href="#" class="a1">下拉选项2</a></li>

            <li><a href="#" class="a1">下拉选项3</a></li>

            <li><a href="#" class="a1">下拉选项4</a></li>

            <li><a href="#" class="a1">下拉选项5</a></li>

        </ul>

    </div>

</div>

</body>

</html>



// JavaScript Document

window.onload=function (){

	var Btn=document.getElementById('btn');

	var Ul=document.getElementById('ul1');

	var A=document.getElementsByClassName('a1');

	

	Btn.onclick=function ()

	{

		if(Ul.style.display=='block'){

			Ul.style.display='none';

			}

		else{

			Ul.style.display='block';

			}

		}

	

	Btn.onmouseover=function ()

	{

		Btn.style.backgroundColor='rgba(0,90,0,1)';

		Btn.style.color='rgba(240,240,240,1)';

		}

	Btn.onmouseout=function ()

	{

		Btn.style.backgroundColor='rgba(51,51,51,1)';

		Btn.style.color='rgba(255,255,255,1)';

		}

	var i=0;//循环标记变量

	

	for(i=0;i<=A.length;i++)

	{			

		A[i].onmouseover=function ()

		{//创建鼠标移过事件

			for(i=0;i<=A.length;i++)

			{

				A[i].style.backgroundColor='rgba(51,51,51,1)';

				}//使全部下拉选项背景色统一

			this.style.backgroundColor='rgba(0,90,0,1)';

			}//将选中的下拉选项框颜色改变

		}	

	}

...全文

135 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

Beagle4ce 2012-08-15

打赏
举报

[Quote=引用 1 楼的回复:]

你是想改变单个还是？？先看了一下你的循环有很大问题，你既然是从0开始的那个肯定不能等于那个他的长度了，索引是从0开始，肯定最大的索引会比长度小1个，所以你必须比长度-1；所以你要么是<=length-1;要么就是<length；这是其1
其二：你如果想改变当前鼠标移入的这个选项，那么你就不要循环，直接利用this这个对象就可以了，首先将所有的选项恢复到初始状态，然后this.styl……
[/Quote]
恩,谢谢你刚才的解答,已经解决了,的确是的一个问题,边界值越界了.
不过第二个还是不怎么懂,能将就我的代码解释下吗,用代码来解释.谢谢

d945332077 2012-08-15

打赏
举报

你是想改变单个还是？？先看了一下你的循环有很大问题，你既然是从0开始的那个肯定不能等于那个他的长度了，索引是从0开始，肯定最大的索引会比长度小1个，所以你必须比长度-1；所以你要么是<=length-1;要么就是<length；这是其1
其二：你如果想改变当前鼠标移入的这个选项，那么你就不要循环，直接利用this这个对象就可以了，首先将所有的选项恢复到初始状态，然后this.style.........='rgba()';这样就行了还有问题可以给我发站内信