css 如何将部分代码移动到另一个文件中，以便在所有页面上都可以引用它？[副本]

iyzzxitl 于 2023-10-21 发布在其他

关注(0)|答案(1)|浏览(120)

这个问题已经有答案了：

How can I reuse HTML code across several HTML files（1个答案）
4天前关闭。
我有一个网站供个人使用。我需要将上半部分和sidenav菜单移动到一个单独的文件中，并在所有页面上简单地链接到它，因为我将来需要向菜单中添加新按钮。我是一个网站制作新手，所以我不知道该怎么做。（我使用物化）
我没有经验，也不知道怎么做

css

来源：https://stackoverflow.com/questions/77297899/how-do-i-move-part-of-the-code-to-another-file-so-that-it-can-be-referenced-on-a

1条答案

按热度按时间

e4eetjau1#

你的问题有点模糊，但我可以从中理解的是，你想为导航栏创建一个单独的文件，并将其链接到不同的页面，而不是在每个页面上添加相同的代码。
如果您使用的是JavaScript，则可以为导航栏创建一个单独的文件，如navbar.html，然后使用JavaScript获取并将其插入到页面中。
下面的步骤考虑的是一个名为navbar.html的文件，但也应该适用于sidenav-menu文件。
1.创建导航栏文件（navbar.html）：在项目目录中，为导航栏创建一个新的HTML文件。该文件将包含HTML并链接到您的物化CSS代码。下面是这个文件应该是什么样子：

<!-- navbar.html -->
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

1.修改页面以包含导航栏。在每个想要包含导航栏的HTML文件中，添加一个容器元素（例如，div）作为导航栏的占位符。类似下面的东西：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website</title>
</head>
<body>
    <div id="navbar-container"></div>
    <!-- The rest of your content goes here -->
    <script src="path/to/navbar-injector.js"></script>
</body>
</html>

1.创建一个新的JavaScript文件，我们称之为navbar-injector.js。该文件将使用Fetch API加载navbar.html文件的内容并将其注入占位符容器。下面是代码：

// navbar-injector.js
document.addEventListener("DOMContentLoaded", function () {
    fetch('path/to/navbar.html')
        .then(response => response.text())
        .then(data => {
            document.getElementById('navbar-container').innerHTML = data;
        });
});

1.在每个文件中，在每个HTML文件的末尾，就在结束标记之前，包括navbar-injector.js文件，如下所示：

<!-- index.html -->
<!-- ... (previous content) ... -->
<script src="path/to/navbar-injector.js"></script>
</body>
</html>

这些步骤应该可以帮助你，但如果你有任何问题，请随时发表评论，我会尽力帮助你：）

赞(0）回复(0）举报 2023-10-21

我来回答

css 如何将部分代码移动到另一个文件中，以便在所有页面上都可以引用它？[副本]

1条答案

相关问题

热门标签

最新问答