用dom实现像优快云论坛的显示的功能

最新推荐文章于 2024-12-17 21:26:40 发布

原创最新推荐文章于 2024-12-17 21:26:40 发布 · 964 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #border #function #javascript #html #文档

Javascript 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的下拉菜单示例。当鼠标悬停在顶部导航栏的不同选项上时，相应的子菜单会显示出来，同时改变背景颜色。此示例展示了如何通过简单的JavaScript函数控制元素的显示与隐藏，并更改其样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图所示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

function show_onOver(a)

{

var theTrId;

for(var i=1; i<=6; i++)

{

theTrId = "trShow" + i;

if(i==a)

document.getElementById(theTrId).style.display = "block";

else

document.getElementById(theTrId).style.display = "none";

}

function onloadFun()

{

var theTrId;

for(var i=1; i<=6 ; i++)

{

theTrId = "trShow" + i;

document.getElementById(theTrId).style.display = "none";

}

</script>

</head>

<tr>

</tr>

<tr>

<tr>

<td>新闻 - Hello World! </td>

</tr>

</table>

</td>

</tr>

<tr>

<td>博客 - Hello World! </td>

</tr>

</table>

</td>

</tr>

<tr>

<td>论坛 - Hello World! </td>

</tr>

</table>

</td>

</tr>

<tr>

<td> 图书 - Hello World! </td>

</tr>

</table>

</td>

</tr>

<tr>

<td> 介绍 - Hello World! </td>

</tr>

</table>

</td>

</tr>

<tr>

<td>其他 - Hello World! </td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>