您好！欢迎访问家园网-www.jy.wang!

家园网

您当前的位置：首页 > 计算机技术 > JavaScript

如何实现鼠标经过主菜单时显示或隐藏子菜单

网络 作者：本站 点击： 
<div>
<script type="text/javascript">
function showadv(par,par2){
	document.getElementById("a0").style.display = "none";//隐藏id为a0的元素
	document.getElementById("a0bg").style.backgroundImage="";	//设置id为a0bg的元素的背景图片为空
	document.getElementById("a1").style.display = "none";//隐藏id为a1的元素
	document.getElementById("a1bg").style.backgroundImage="";//设置id为a1bg的元素的背景图片为空
	document.getElementById("a2").style.display = "none";//隐藏id为a2的元素
	document.getElementById("a2bg").style.backgroundImage="";//设置id为a2bg的元素的背景图片为空
	document.getElementById("a3").style.display = "none";//隐藏id为a3的元素
	document.getElementById("a3bg").style.backgroundImage="";//设置id为a3bg的元素的背景图片为空
	document.getElementById("a4").style.display = "none";//隐藏id为a4的元素
	document.getElementById("a4bg").style.backgroundImage="";//设置id为a4bg的元素的背景图片为空
	document.getElementById("a5").style.display = "none";//隐藏id为a5的元素
	document.getElementById("a5bg").style.backgroundImage="";//设置id为a5bg的元素的背景图片为空
	document.getElementById("a6").style.display = "none";//隐藏id为a6的元素
	document.getElementById("a6bg").style.backgroundImage="";//设置id为a6bg的元素的背景图片为空
	document.getElementById(par).style.display = "";	//显示指定的元素
	document.getElementById(par2).style.backgroundImage = "url(images/i13.gif)";	//设置指定元素的背景图片
}
</script>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
      <tr>
        <td><div class="i01w">
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td width="166" height="42" align="center" id="a0bg">
					<span id="a0color" onMouseOver="showadv('a0','a0bg')">
						<a href="index.html">首页</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a1bg" align="center" width="166">
					<span id="a1color" onMouseOver="showadv('a1','a1bg')">
						<a href="love.html">爱情片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a2bg" align="center" width="166">
					<span id="a2color" onMouseOver="showadv('a2','a2bg')">
						<a href="action.html">动作片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a3bg" align="center" width="166">
					<span id="a3color" onMouseOver="showadv('a3','a3bg')">
						<a href="scienceFiction.html">科幻片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a4bg" align="center" width="166">
					<span id="a4color" onMouseOver="showadv('a4','a4bg')">
						<a href="horror.html">恐怖片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
				<td id="a5bg" align="center" width="166">
					<span id="a5color" onMouseOver="showadv('a5','a5bg')">
						<a href="art.html">文艺片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a6bg" align="center" width="166">
					<span id="a6color" onMouseOver="showadv('a6','a6bg')">
						<a href="cartoon.html">动漫</a>
					</span>
				</td>
              </tr>
            </table>
        </div></td>
      </tr>
      <tr>
        <td><table width="100%" height="41" cellpadding="0" cellspacing="0" id="a0" border="0">
            <tr>
              <td align="left" style="padding-left:12px">欢迎来到365影视网</td>
            </tr>
          </table>
            <table id="a1" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td  style="padding-left:97px" align="left"><ul class="i02w">
                    <li>爱情喜剧</li>
                  <li>古典爱情</li>
                  <li>现代爱情</li>
                </ul></td>
              </tr>
            </table>
          <table id="a2" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:292px" align="left"><ul class="i02w">
                    <li><a href="#">枪战片</a></li>
                  <li><a href="#">武侠片</a></li>
				  <li><a href="#">魔幻片</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a3" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:456px"><ul class="i02w">
                    <li><a href="#">外星人</a></li>
                  <li><a href="#">自然灾难</a></li>
				  <li><a href="#">生物变异</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a4" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:636px"><ul class="i02w">
                    <li><a href="#">惊悚片</a></li>
                  <li><a href="#">恐怖片</a></li>
				  <li><a href="#">悬疑片</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a5" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-right:160px"><ul class="i03w">
                  <li>音乐片</li>
                  <li>歌舞片</li>
                  <li>纪录片</li>
                </ul></td>
              </tr>
          </table>
		  <table id="a6" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-right:2px"><ul class="i03w">
                  <li>历史动漫</li>
                  <li>搞笑动漫</li>
                  <li>英雄动漫</li>
                </ul></td>
              </tr>
          </table></td>
      </tr>
    </table>
  </div>


这段代码通过JavaScript函数和HTML事件属性实现了鼠标经过主菜单时显示或隐藏子菜单的功能。

‌核心实现机制：‌

  1. ‌事件触发‌：每个主菜单项通过onMouseOver属性绑定showadv()函数

  2. ‌统一控制‌：showadv()函数先隐藏所有子菜单，再显示对应的子菜单

  3. ‌视觉反馈‌：同时改变对应菜单项的背景图片

‌具体实现步骤：‌

  • ‌初始化隐藏‌：子菜单a1、a2默认设置display: none

  • ‌参数传递‌：showadv('a1','a1bg')传递需要显示的子菜单ID和需要设置背景的菜单项ID

  • ‌状态切换‌：每次鼠标经过时重置所有菜单状态，然后激活当前菜单项

‌代码特点：‌

  • 通过控制CSS的display属性实现显隐切换

  • 使用背景图片变化提供视觉反馈

  • 通过参数化设计实现函数复用


document.getElementById(par).style.display = "";

这句代码就能显示par对应的id的内容吗？

这里不是个""，这不是个空吗？




























关键解析：document.getElementById(par).style.display = ""; 的显示机制

1. ‌核心原理‌

  • ‌display 属性‌：控制元素的显示状态，可取值包括 block、none、inline 等。

  • ‌空字符串行为‌：当 display 属性被设置为空字符串 "" 时，浏览器会‌自动解析为默认值 inline‌

  • ‌显示效果‌：display: inline 使元素以行内元素形式显示，‌不占用新行‌，但‌可设置宽度和高度‌

2. ‌代码验证‌

document.getElementById(par).style.display = ""; // 实际效果等同于 display: inline

  • ‌实际效果‌：元素显示为行内元素，‌不隐藏‌，但‌不占用新行‌（与 display: block 不同）。

3. ‌最佳实践‌

  • ‌显示元素‌：若需显示元素，应显式设置 display: block 或 display: inline-block

  • ‌隐藏元素‌：若需隐藏元素，应设置 display: none5。

4. ‌示例修正‌

document.getElementById(par).style.display = "block"; // 正确显示为块级元素

  • ‌效果‌：元素显示为块级元素，‌占用新行‌，符合预期。

‌总结‌：空字符串 "" 会被解析为 display: inline，‌不隐藏元素‌。若需显示元素，应显式设置 display: block 或 display: inline-block。


那上面经过a1时，实际上相当于加了什么内容？































关键解析：鼠标经过 a1 时的视觉效果

1. ‌核心机制‌

  • ‌事件触发‌：<span id="a1color" onMouseOver="showadv('a1','a1bg')"> 绑定 onMouseOver 事件。

  • ‌视觉效果‌：

    • ‌显示子菜单‌：document.getElementById('a1').style.display = "block";（通过 showadv 函数实现）。

    • ‌背景变化‌：document.getElementById('a1bg').style.backgroundImage = "url(images/i13.gif)";（设置背景图片）。

2. ‌具体效果‌

  • ‌子菜单显示‌：a1 元素（子菜单）从隐藏状态（display: none）切换为显示状态（display: block），‌占用新行‌（块级元素特性）。

  • ‌背景图片‌：a1bg 元素（主菜单项）背景图片从空变更为 i13.gif，提供视觉反馈。

3. ‌关键参数‌

  • ‌display: block‌：使子菜单元素‌占用新行‌，‌不与主菜单重叠‌（与 display: inline 不同）

  • ‌背景图片‌：通过 backgroundImage 属性动态修改背景，增强交互感。

4. ‌代码验证‌

function showadv(par, par2) {
  document.getElementById(par).style.display = "block"; // 显示子菜单
  document.getElementById(par2).style.backgroundImage = "url(images/i13.gif)"; // 设置背景图片
}

  • ‌效果‌：鼠标经过 a1 时，子菜单 a1 显示为块级元素（占用新行），主菜单项 a1bg 背景图片变化。

‌总结‌：鼠标经过 a1 时，实际相当于‌显示子菜单‌（display: block）并‌改变背景图片‌，实现交互效果。


相当于添加了下面这段代码  

<table id="a1" style="display: block" height="41" cellspacing="0" cellpadding="0" width="100%" border="0" background: url(images/i13.gif)>
              <tr>
                <td  style="padding-left:97px" align="left"><ul class="i02w">
                    <li>爱情喜剧</li>
                  <li>古典爱情</li>
                  <li>现代爱情</li>
                </ul></td>
              </tr>
            </table>


标签：