原生js和html5实现多个 HTML 文件可以共用一个头部导航栏
要实现多个HTML文件共用一个头部导航栏，可以通过以下步骤：
- 创建一个单独的HTML文件，例如
header.html，包含导航栏的代码。 - 在主内容的HTML文件中，使用
iframe或object标签嵌入header.html。
这里是一个简单的例子：
header.html:
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>content.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Content Page</title>
<style>
body { margin: 0; padding: 0; }
iframe { width: 100%; height: 100vh; border: none; }
</style>
</head>
<body>
<iframe src="header.html"></iframe>
<!-- Main content goes here -->
<h1>Welcome to the content page</h1>
<!-- More content... -->
</body>
</html>请注意，使用iframe嵌入头部导航可能会遇到跨域策略问题，如果是在本地测试，通常不会有问题。如果是在Web服务器上，可能需要服务器配置以允许iframe跨域资源共享（CORS）。
评论已关闭