好的，现在我将为你添加一些交互效果的JavaScript代码，以增强导航栏的功能。在这个示例中，我们将实现一个简单的下拉菜单效果。
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li class="dropdown">
<a href="#">关于我们</a>
<ul class="dropdown-content">
<li><a href="#">公司简介</a></li>
<li><a href="#">团队</a></li>
<li><a href="#">客户</a></li>
</ul>
</li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<h1>欢迎来到导航栏页面</h1>
<p>这是一个简单的导航栏示例。</p>
<script src="script.js"></script>
</body>
</html>
style.css:
/* 省略其他样式 */
/* 下拉菜单内容隐藏 */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 0;
}
/* 下拉菜单链接样式 */
.dropdown-content li {
padding: 10px;
}
/* 显示下拉菜单内容 */
.dropdown:hover .dropdown-content {
display: block;
}
script.js:
// 获取所有下拉菜单项
const dropdownItems = document.querySelectorAll('.dropdown');
// 为每个下拉菜单项添加鼠标移出事件，当鼠标移出时隐藏下拉菜单内容
dropdownItems.forEach(item => {
item.addEventListener('mouseleave', () => {
const dropdownContent = item.querySelector('.dropdown-content');
dropdownContent.style.display = 'none';
});
});
在这个示例中，我们为"关于我们"菜单项添加了一个下拉菜单，包含了三个子菜单项：公司简介、团队和客户。初始状态下，子菜单内容是隐藏的，当鼠标悬停在"关于我们"菜单项上时，子菜单内容将显示出来。当鼠标移出"关于我们"菜单项时，子菜单内容将再次隐藏。
你可以在浏览器中打开index.html文件，查看这个导航栏页面的交互效果。这只是一个简单的示例，你可以根据需求继续扩展交互效果和样式。希望这个示例对你有所帮助！