当您在网页开发中需要创建一个简单的导航菜单，点击菜单项时显示相应的子菜单时，可以使用以下HTML和JavaScript的简单教程。在这个例子中，我们创建了一个包含三个主菜单的简单网页，每个主菜单下有三个子菜单。点击主菜单时，相应的子菜单将显示，点击其他主菜单时，先前显示的子菜单将隐藏。
创建HTML结构
htmlCopy code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单导航菜单</title>
<style>
/* 添加一些样式，使菜单看起来更好 */
.nav-list {
list-style-type: none;
cursor: pointer;
}
.nav-list li {
display: none;
}
</style>
</head>
<body>
<div id="MyNav1">
<ul>
主菜单 A
<li>
<a href="#">A1</a>
<a href="#">A2</a>
<a href="#">A3</a>
</li>
</ul>
<ul>
主菜单 B
<li>
<a href="#">B1</a>
<a href="#">B2</a>
<a href="#">B3</a>
</li>
</ul>
<ul>
主菜单 C
<li>
<a href="#">C1</a>
<a href="#">C2</a>
<a href="#">C3</a>
</li>
</ul>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var navItems = document.querySelectorAll('.nav-list');
navItems.forEach(function (navItem) {
navItem.addEventListener('click', function () {
// 隐藏所有 li 元素
navItems.forEach(function (item) {
item.querySelector('li').style.display = 'none';
});
// 显示相应的 li 元素
this.querySelector('li').style.display = 'block';
});
});
});
</script>
</body>
</html>解释
我们使用了HTML和CSS创建了一个包含三个主菜单的基本网页结构，每个主菜单下都有一个包含三个子菜单的列表。
我们使用了JavaScript来监听主菜单的点击事件。当主菜单被点击时，它会隐藏所有其他子菜单，并显示相应主菜单的子菜单。
这只是一个简单的例子，您可以根据自己的需要进行修改和扩展。希望这个简短的教程对您有帮助！
